What changed, and when改了什么，什么时候改的

v4.1 — 2 November 2026: the "random effect" bug

Someone pressed Surprise me and got nothing. The cause was one line: the random button drew from all 131 entries, and 73 of those are third-party pages from repo/ shown through an iframe. Those pages are designed for a full viewport. Dropped into a 380-pixel-tall modal, many of them paint only a small corner of themselves. Worse, a fair number start hidden and wait for a button press — the Letters demo renders no glyphs at all until you click, the falling-body demo waits for its 点击 button, and one demo animates document.title, which an iframe can never show.

• Random now draws only from the 58 hand-written effects, and respects the active category filter. Those are self-contained demo() functions that size themselves to whatever container they are given.
• Interaction-only effects announce themselves. Ten of them — the neon drawing board, the scratch card, the spotlight, the ripple, the bubble, the elastic ball and four more — are static until you drag or click, which reads as broken. A small caption now sits in the demo area and removes itself after the first real interaction.
• Pointer handlers moved to window for the eye-tracking, magnet-button and spotlight demos, so moving the mouse anywhere in the modal has an effect, instead of requiring the cursor to land precisely on the element.
• Two listener leaks fixed: the magnet and spotlight demos never removed their touchmove handler, and the confetti demo leaked a setInterval every time you switched effects.
• Two effects learned to respond to clicks. The constellation demo and the gravity field only followed the cursor, so pressing the mouse did nothing — which is the first thing a visitor tries. Clicking now drops a new star (with a ripple) and blows the particle field apart respectively.
• Particle text now behaves like particle text. The entry promised "click to fire particles that gather into glowing letters" and delivered neither: it blasted 40 particles out of the centre every 500 ms and had no click handler at all. It now samples the letters into roughly 900 particles; clicking anywhere sprays a cluster from that exact point and blows the nearby letters apart, and a spring pulls everything back. The same demo and the older text-particle one beside it also stopped tinting their entire canvas teal — a semi-transparent fill that never fully cleared let the glow accumulate until the background saturated.
• Two dead demos fixed: the mirror-text effect was a static picture and now ripples; confetti burst once and then sat still, and now re-bursts continuously. The title-scrolling demo has no visible output inside an iframe at all, so it shows an explanation instead of an empty box.

Getting the verification right was harder than the fixes, and the first two attempts were wrong. Measuring getBoundingClientRect misses every CSS animation. Comparing two screenshots 400 ms apart misses everything that waits for input. Synthetic MouseEvents report offsetX = 0, so every cursor-positioned effect looked dead. What works is a headless browser driven over the DevTools Protocol: real mouse events, screenshots of the demo area only, and a comparison of before versus after the poke — because a spotlight or a scratch card is supposed to stay still once you stop moving. Final state: all 58 hand-written effects either animate on their own or respond to input. None blank, none throwing.

v4.0 — 2 November 2026: content restructure

The largest change since the site existed. The effect gallery was never the problem; the problem was that the site had 58 near-identical detail pages averaging 298 words, which is a thin-content signal however good the demos are.

• Ten long-form guides replace the detail pages as the editorial core, organised by technique rather than by category: particle lifecycle, force fields, fake 3D, text in motion, text as pixels, blend modes, distortion, pointer as input, direct manipulation, procedural geometry. Together they cover all 58 hand-written effects and run to roughly 10,000 words of English, mirrored in Chinese.
• The 58 detail pages are now demos, marked noindex, each linking up to the guide that explains its technique. They still run, still show source, still copy — they are just no longer pretending to be articles.
• Third-party demos de-indexed. All 116 HTML files under repo/ now carry noindex, nofollow. They remain fully reachable and fully functional inside the site; they are simply no longer offered to search engines as content.
• Added a real home page section explaining what the site is, and two trust pages: this changelog and an about page naming the author and stating exactly which effects are mine and which are not.
• Sitemap rebuilt from 61 URLs to 15: the pages that actually have content. robots.txt added. The legacy grassland page, which had nothing to do with the site's subject, was removed from the index.
• New tooling: _gen-guides.js (generator), _gen-sitemap.js (sitemap), _build/noindex-repo.js (idempotent de-indexing), _build/audit-content.js (measures the word count of every page so thin content is visible rather than guessed at).

v3.8 — 21 October 2026: regional consent defaults

Two gtag('consent','default') blocks instead of one: the EEA, UK and Switzerland get everything denied, and everywhere else gets granted (analytics stays off, since the site runs no analytics). The region list is 32 entries and is checked character by character by _build/check-ads.js. The fallback banner gained a region gate so it only appears where prior consent is actually required.

v3.7 — 21 October 2026: Google-certified CMP

The self-built consent banner was rewritten as a takeover layer. If Google's own certified CMP is present, the site's banner never appears and never writes to localStorage. If it is absent after 2.5 seconds — message not published, or an ad blocker ate the script — the fallback appears, and removes itself if the real CMP shows up late. Two banners asking the same question is worse than one.

The <head> consent defaults also stopped reading localStorage at this point. A stored "accept all" was overriding the EEA default to granted, which was a real compliance bug.

v3.6 — 21 October 2026: privacy policy and consent

A bilingual privacy policy covering server logs, local storage, AdSense cookies, opt-out routes and GDPR/CCPA rights. Plus the first consent banner (now demoted to fallback) and Consent Mode v2 wired into every page's <head>.

v3.5 — 21 October 2026: 58 detail pages

Each of the 58 hand-written effects got its own page with a live demo, a breakdown of the real implementation, two tunable parameters, the source, and links to the neighbours. This was the first attempt at having content rather than a gallery; v4.0 replaced the format because the pages were too short and too similar to each other.

This version also fixed a real bug that had been silent for a long time: the starfield effect computed a negative arc radius, which throws in Canvas, so the demo had been failing quietly on the home page.

v3.4 — AdSense

Auto ads on the site's own pages, ads.txt published, and a deliberate decision not to put advertising inside the third-party demos.

v3.3 — Bilingual

English and Chinese, switchable at runtime with no build step. 131 effect titles and descriptions translated, plus the interface strings. Language resolution order: URL parameter, then stored preference, then navigator.language. Switching language updates the title, meta description, Open Graph tags, canonical URL and hreflang without a reload.

v3.1–3.2 — Two deployment bugs

First, every repo demo rendered black: the preview server served over http while the iframes pointed at file://, and the browser blocked the cross-protocol load. Fixed with same-origin serving. Then, after deploying, the demos 404'd again because the iframe paths still resolved to a directory that only existed on the development machine — the files were copied into the repository and the paths made relative.

v3 — 131 effects

73 demos from an older JavaScript repository were integrated alongside the 58 hand-written ones, adding the Components and Games categories. Third-party files are shown unmodified through iframes so their jQuery and ECharts dependencies keep working.

v2 — the lab

The site was rebuilt as a dark neon gallery: 12 effects, each with copyable source and a fullscreen run mode. Later expanded to 36, then 58. All text-based effects were changed to use YILANA.CN so the demos stopped advertising someone else's domain.

v1 — a grassland

The original site was a single page about the grasslands of Inner Mongolia. It has nothing to do with visual effects, which is why it is no longer indexed; the file is still there if you know the URL.

v4.1 — 2026 年 11 月 2 日：修「随机来一个」

有人点「随机来一个」，结果什么都没发生。原因就在一行代码上：随机是从全部 131 个条目里抽的，而其中有 73 个是 repo/ 下的第三方页面，用 iframe 嵌进来。这些页面是照整页尺寸做的，塞进 380 像素高的弹窗，很多只画出自己的一个小角。更麻烦的是，相当一部分页面首帧本来就是隐藏的、要等你点按钮——Letters 那个不点一下根本不显示字形，自由落体那个在等它的「点击」按钮，还有一个 demo 动的是 document.title，iframe 里永远看不到。

• 随机改成只在 58 个手写特效里抽，并且跟随当前分类筛选。这 58 个是自带尺寸自适应的 demo() 函数，给多大容器就按多大画。
• 必须交互的特效学会自我说明。有十个——霓虹画板、刮刮乐、聚光灯、水波纹、泡泡、弹性球等——不拖不点就是一张静止图，看起来就像坏了。现在演示区底部会浮一条说明，第一次真正操作后自动撤掉。
• 三个 demo 的鼠标监听从元素提到 window（跟随的眼睛、磁吸按钮、聚光灯），鼠标在弹窗里任何位置移动都有反应，不用先精确移到元素上。
• 修了两处监听泄漏：磁吸按钮和聚光灯从来没有解绑过 touchmove；五彩纸屑每切一次特效就漏一个 setInterval。
• 两个特效学会响应点击。星座连线和引力场原来只跟鼠标走，鼠标按下去毫无动静——而这恰恰是访客第一个会做的动作。现在点一下会在落点长出一颗新星（带一圈涟漪），引力场则会把聚在光标周围的粒子轰散。
• 粒子文字终于像个粒子文字了。这个条目原本写着「点击发射粒子、聚成发光文字」，两件事都没做到：只是每 500 毫秒从正中喷 40 个粒子，连 click 监听都没有。现在先把文字采样成约 900 个粒子，点哪里就从哪里喷一簇、并把附近的字轰开，随后弹簧力再把它们收回文字。顺带修掉它和旁边那个「文字粒子」共同的老毛病：半透明填充清不干净，发光逐帧累积，最后整块画布被染成青绿色。
• 修了两个「死的」demo：镜像文字原本是纯静态图，现在有水波呼吸；五彩纸屑只撒一波就静止，现在接成连续飘落。滚动标题那个在 iframe 里根本没有可见输出，改成文字说明，不再给一个空框。

把验证做对，比修 bug 本身更难，前两版检测方法都是错的：量 getBoundingClientRect 测不到任何 CSS 动画；隔着 400 毫秒截两张图，测不到所有「等着你操作」的特效；合成 MouseEvent 的 offsetX 永远是 0，凡是靠光标定位的特效全被判成死的。最后能用的办法是用 DevTools 协议驱动无头浏览器：发真实鼠标事件、只截演示区、并且比操作前和操作后——因为聚光灯、刮刮乐这种东西，你手停下来之后本来就该不动。最终结果：58 个手写特效全部「自己会动」或「操作后有反应」，没有空白，没有异常。

v4.0 — 2026 年 11 月 2 日：内容重构

建站以来最大的一次改动。特效展厅从来不是问题所在；问题是站上有 58 个几乎一模一样的详解页，平均 298 词——不管示例做得多好，这都是一个「薄内容」信号。

• 十篇主题长文取代详解页成为内容主体，按技术而非按分类组织：粒子生命周期、力场、伪 3D、文字动效、文字即像素、混合模式、失真、指针即输入、直接操作、程序化几何。合起来覆盖全部 58 个手写特效，英文约一万词，中文等量对照。
• 58 个详解页降级为演示页，标记 noindex，每页向上链到解释它技术的那篇长文。它们仍然能运行、能看源码、能复制——只是不再假装自己是一篇文章。
• 第三方示例退出索引。repo/ 下 116 个 HTML 全部加上 noindex, nofollow。它们在站内依然完全可访问、功能不变，只是不再作为「内容」交给搜索引擎。
• 首页补了真正的导览段落，并新增两个信任页：这一页更新日志，以及一个关于页——写明作者是谁、哪些特效是我的、哪些不是。
• 站点地图重建，从 61 条压到 15 条：只保留真正有内容的页面。新增 robots.txt。与站点主题毫无关系的草原旧页也从索引里移除了。
• 新工具：_gen-guides.js（生成器）、_gen-sitemap.js（地图）、_build/noindex-repo.js（幂等的退索引）、_build/audit-content.js（量每页词数，让「内容薄」变成可见的数字而不是感觉）。

v3.8 — 2026 年 10 月 21 日：同意默认值分地区

两条 gtag('consent','default') 取代原来的一条：EEA、英国、瑞士全部拒绝，其他地区放行（analytics 仍关闭，因为本站不接分析工具）。地区列表 32 项，由 _build/check-ads.js 逐字符核对。兜底横幅加了地区门控，只在真正需要事先同意的地区出现。

v3.7 — 2026 年 10 月 21 日：改用 Google 认证 CMP

自建横幅被重写成「接管层」。如果 Google 自己的认证 CMP 在场，本站横幅完全不出现、也不写 localStorage。如果 2.5 秒后它还没出现——消息没发布，或者被广告拦截器吃掉了——兜底横幅上场，并且会在真 CMP 迟到时自动撤掉自己。两个弹窗问同一件事，比一个更糟。

<head> 里的同意默认值也在这一版停止读 localStorage。存着「全部接受」会把 EEA 的默认值顶成 granted，那是一个真实的合规 bug。

v3.6 — 2026 年 10 月 21 日：隐私政策与同意

一份双语隐私政策，覆盖服务器日志、本地存储、AdSense Cookie、退订入口和 GDPR/CCPA 权利。加上第一版同意横幅（现在已降级为兜底），以及接进每个页面 <head> 的 Consent Mode v2。

v3.5 — 2026 年 10 月 21 日：58 篇详解页

58 个手写特效各得一个独立页面：实时演示、真实实现的拆解、两个可调参数、源码、以及相邻页面的内链。这是「除了展厅之外还得有内容」的第一次尝试；v4.0 换掉了这个格式，因为每页太短、而且彼此太像。

这一版还修了一个沉默了很久的真 bug：starfield 算出了负的圆弧半径，Canvas 会直接抛异常，所以那个示例在首页一直是静默失败的。

v3.4 — 接入 AdSense

站点自有页面开启自动广告，发布 ads.txt，并明确决定不在第三方示例里投广告。

v3.3 — 中英双语

中英双语，运行时切换，无构建步骤。131 条特效标题与描述全部翻译，加上界面文案。语言判定顺序：URL 参数 → 存储的偏好 → navigator.language。切换时同步更新 title、meta description、Open Graph、canonical 与 hreflang，不刷新页面。

v3.1–3.2 — 两个部署 bug

先是所有仓库示例全黑：预览服务走 http，而 iframe 指向 file://，浏览器拦掉了跨协议加载。改成同源托管后解决。然后是部署上线后示例又 404：iframe 路径仍然指向一个只存在于开发机上的目录——把文件复制进仓库、路径改相对之后才算完。

v3 — 131 个特效

把旧 JavaScript 仓库里的 73 个示例和 58 个手写特效并到一起，新增「组件」和「游戏」两个分类。第三方文件通过 iframe 原样展示，这样它们依赖的 jQuery 和 ECharts 才能继续工作。

v2 — 实验室

整站改成深色霓虹风格：12 个特效，每个都能复制源码、全屏运行。后来扩到 36 个，再到 58 个。所有文字类特效统一换成 YILANA.CN，免得示例一直在给别人打广告。

v1 — 一片草原

最早是一个关于内蒙古大草原的单页。它和视觉特效毫无关系，所以现在不再进索引；文件还在，知道地址就能打开。