site `leaf-shadow`

这是 Web Device layout component（本站），不是 AUP primitive，不是 AUP Web-only widget，也不是 Markdown 指令。

站点包：blocklets/arcblock/.web/components/leaf-shadow/。解析：site override > theme default。

本站今天就在用这份包。播放器正在加入 ARC default theme（providers/runtime/web-device/themes/default/components/leaf-shadow/，ArcBlock/arc#5329）。自有 gobo MP4 留在本站。在本站跑到带该 theme 包的 arc 之前，以站点副本为真源。本站追踪：#464。

用途

把移动的树荫光（或任何光学 gobo）铺在整页或一个区块上。设了 src 用视频 loop；没设就用程序化 WebGL 叶场。混合模式是 mix-blend-multiply。

白底上的字是一份文件。光在字上移动，页面就成了一个房间：字还是那些字，带上一个时辰，人愿意多停。Landing 不再像 CMS 模板。换一段 clip（树荫、窗光、水面、雨），心情就换，不必改文案。

Live

整页 overlay 和 HUD（本站 lab）：

介绍文章把同一层 overlay 穿在一篇真正的文章上：光打在页面上，不是一棵树的照片。

不是这个组件

对象	区别
场景本身的照片	overlay 必须是打在浅表面上的投影，不是主体写真
AUP widget / Markdown 指令	作者入口只有 layout
第三方阴影视频	不要把别的站点的 loop 拷进本仓库

什么时候用

整页气氛（variant=overlay）：landing、长文、lab。字还是字，天气铺在上面。
区块内 wash（variant=wash）：祖先要是 positioning 上下文，只让一块沾上光。
lab HUD 里切换自有 clip，或用 gobo-loop 从一句话做出新片段。

什么时候不用

文件是肖像、产品截图或可读文字。multiply 会印到每一段上。
片段还是好几 MB。先压缩。
只想写在 Markdown 正文、没有 layout。把 leaf-shadow 放到 layout.aup 或具名 layout。

作者入口

layout.aup

带 gobo 的 overlay（lab / 文章写法）

component fx slot=leaf-fx component=leaf-shadow
    variant=overlay
    intensity=0.2
    controls=true
    src="/en/articles/leaf-shadow-gobo/canopy.mp4"

选一个不会给 position: fixed 制造包含块的 layout（避免 transform、filter，以及 detail-content 的 after-content 这种排在文档流后部的 slot）。本站已验证的宿主是 landing-shell。overlay 层是 position: fixed; inset: 0；HUD 也是 position: fixed，宿主一旦被 transform，会钉到错误的盒子上。

程序化退路（无 `src`）

component fx slot=leaf-fx component=leaf-shadow
    variant=overlay
    intensity=0.28

本站 live：

Lab：/zh/leaf-shadow-lab/
介绍文章：/zh/articles/leaf-shadow-overlay/
四条自有 clip：/en/articles/leaf-shadow-gobo/{canopy,window,caustic,rain-ripple}.mp4

这些 MP4 在 content/articles/leaf-shadow-gobo/，没有 content.md，所以不会被列成文章。

Props

来自 manifest.json。

Prop	类型	默认	作用
`variant`	string	`overlay`	`overlay` = 整页 fixed · `wash` = 区块 absolute
`intensity`	number	有 `src` 时 `0.2`，否则 `0.28`	透明度 0–1
`speed`	number	`1`	漂移速度（程序化 canvas）
`angle`	number	`0.35`	光线剪切 0–1（程序化 canvas）
`controls`	boolean	`false`	HUD：开关 + 强度（本站还加了 clip 按钮）
`src`	string	空	gobo 循环 URL。设置后用视频替换 canvas

HUD 协议（script.js）

按钮用 data-leaf-act：

`data-leaf-act`	`data-v`	效果
`toggle`	—	暂停/隐藏层
`intensity`	`0.12` / `0.2` / `0.45`	透明度
`src`	URL	换视频（`setSrc`）

theme 包的 HUD 只有开关和强度，禁止写死本站 /en/articles/leaf-shadow-gobo/…。本站包为四个自有 demo 加了 src 按钮。两份 script.js 都处理 data-leaf-act="src"。

HUD 是 pointer-events: auto。层是 pointer-events: none，页面链接仍可点。

做一条新 clip：`gobo-loop`

Skill：.claude/skills/gobo-loop/SKILL.md。

把用户的场景改写成打在浅墙或浅地上的投影。不要主体肖像、家具、可读文字。
生成 16 静帧。
图生视频，6 秒，720p，机位锁定，只做光学运动。
压缩：

bash .claude/skills/gobo-loop/scripts/compress-gobo.sh <in.mp4> blocklets/arcblock/content/articles/leaf-shadow-gobo/<slug>.mp4

目标 100–400 KB，去音轨，12 fps。没有 ffmpeg 就停，报告未压缩路径。不要把 1 MB+ 的片当完成。

把 src 指到 /en/articles/leaf-shadow-gobo/<slug>.mp4。确认 mix-blend-multiply、强度 0.2 看起来像光打在纸上，不像贴了一张照片。

动物剪影（睡觉的猫、金毛）已删。没有新的、读起来像 umbra 的静帧，不要复活它们。

表面

layout。不是 document Markdown 指令表面。

公共状态

本站 released（lab + 介绍文章 + 四条 gobo）。播放器的 theme 提升在 ArcBlock/arc 进行中。不要把 theme 包写成当前这台 arc 二进制已经带上的能力。MP4 是站点媒体，不是 theme 资产。

Fallback

情形	结果
无 `src`	程序化 canvas
`prefers-reduced-motion: reduce`	视频/canvas 暂停；强度限制在约 0.16
暗色 + 视频 overlay	保持 `mix-blend-mode: multiply`（见 style.css）
暗色 + 程序化 overlay	`mix-blend-mode: screen`
`src` 指向的文件不存在	空 video；没有 overlay 纹理
`controls=false`	无 HUD；根节点 `aria-hidden="true"`

Sample 诚实边界

本页无独立 docs-safe mock（整页 overlay）。合同由 pages/leaf-shadow-lab/layout.aup、layouts/leaf-shadow-overlay.aup 和四条 MP4 证明。从那些文件抄 AUP。

证据

项	路径
站点包	`blocklets/arcblock/.web/components/leaf-shadow/`
Manifest	`…/leaf-shadow/manifest.json`
Renderer	`…/leaf-shadow/render.js`
Script	`…/leaf-shadow/script.js`
Style	`…/leaf-shadow/style.css`
Lab	`pages/leaf-shadow-lab/layout.aup`
文章 layout	`layouts/leaf-shadow-overlay.aup`
Gobo 文件	`content/articles/leaf-shadow-gobo/*.mp4`
Skill	`.claude/skills/gobo-loop/SKILL.md`
压缩	`.claude/skills/gobo-loop/scripts/compress-gobo.sh`
内部矩阵	`docs/aup/capability-matrix.md` §5

用途