光打在页面上，不是一棵树的照片

这篇文章正穿着这个效果。

白底上的字是一份文件。读完就走。光在字上移动，页面就成了一个房间：午后、雨、画外有一扇窗。字还是那些字，人愿意多停一会儿。leaf-shadow 要的就是这个。不是 WebGL 里更漂亮的一棵树，也不是把花园照片贴在文章上。它是一小段打在浅表面上的光的循环，乘到你已经写好的东西上，透明度大约 0.2。

Landing 不再像 CMS 模板。长文不用改一句，也能带上一个时辰。换一段 clip，心情就换：树荫、窗光、水面、雨。角落的 HUD 就是用来试这些的。

片段是我们自己生成、压到几百 KB 的文件。

光学，不是植物学

人记得的是墙上的 umbra：软、失焦、有空隙。剧场把这个叫 gobo。页面需要的是一段能循环的、乘到字上的光。

设了 src，leaf-shadow 就播这段 loop。不设 src，退回一片叶形噪声的程序化 canvas。看起来像光的是视频这条路。

四个 demo 放在 articles 集合旁边，没有自己的 content.md，所以不会进文章索引：

/en/articles/leaf-shadow-gobo/canopy.mp4 · window.mp4 · caustic.mp4 · rain-ripple.mp4

同一套 HUD、没有文章壳的 lab：/zh/leaf-shadow-lab/。

一句话变成一段 loop

overlay 可复用。片段也该可复用，而且不要去偷别人的视频。

gobo-loop 就是干这个的 skill。你描述一个场景。agent 不去生成那场景的照片。它生成的是场景投影在奶油白墙或浅地面上的静帧，再做成锁定机位的 6 秒 loop，再压到 100–400 KB（去音轨，12 fps）。

改写才是关键：

skill 在本仓库 .claude/skills/gobo-loop/SKILL.md。压缩用 .claude/skills/gobo-loop/scripts/compress-gobo.sh。挂到页面上：

component fx slot=leaf-fx component=leaf-shadow
    variant=overlay
    intensity=0.2
    src="/en/articles/leaf-shadow-gobo/<slug>.mp4"

props、暗色混合、减少动效、HUD 协议：leaf-shadow 组件文档。

天气穿在字上，字还是字

overlay 除了 HUD 都是 pointer-events: none。链接照点。字还是字。

不要把产品截图、人脸、可读文字放进 gobo。multiply 会把它们印到每一段上。不要把未压缩的 5 MB 成片当完成；压缩脚本存在，是因为一段影子不该比字体文件还大。

读者开了减少动效，视频会停。透明度还在，更淡一点。

同一篇正文，四种天气，一个组件。页面更丰，不必先上一个更丰的 CMS。