冠层分段标题
一片由纹理化叶片构成的浓密冠层以浅景深效果横扫画面，然后分开以揭示第一个标题；第二组深度增强的叶片携带第二个标题经过摄像机。少量叶片留在标题上并保持微风动感。字体、字重、字号、字间距、叶片数量、扫动速度以及保留叶片的微风强度均为变量。
合成块 ID: canopy-part-title。时长 12 秒（30 fps），分辨率为 1920×1080。
文件
canopy-part-title.html（57 KB）assets/leaf-surface-color.webp（64 KB）assets/leaf-surface-normal.webp（136 KB）
安装
通过 npx hyperframes add canopy-part-title 安装；默认情况下，上述文件会放置在 compositions/canopy-part-title/ 目录下。然后在宿主 index.html 中挂载该模块：
<div
data-composition-id="canopy-part-title"
data-composition-src="compositions/canopy-part-title/canopy-part-title.html"
data-start="0"
data-duration="12"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
通过直接指定合成文件路径并使用自定义值渲染：
npx --yes [email protected] render 'compositions/canopy-part-title/canopy-part-title.html' --variables '{"headline1":"Understory","headline2":"Move slowly"}'
变量
运行时通过 window.__hyperframes.getVariables() 读取；在合成根元素上声明为 data-composition-variables 属性（使用单引号括起来的纯 JSON）。
| id | 类型 | 默认值 | 标签 / 范围 |
|---|---|---|---|
headline1 | string | "Understory" | 标题 1 |
headline2 | string | "Move slowly" | 标题 2 |
font | string | "Helvetica" | 标题字体 |
fontWeight | number | 900 | 字体粗细 100–900 步长 100 |
fontSize | number | 1 | 字号（1 = 自动适配）0.3–2 步长 0.01 |
letterSpacing | number | 0.01 | 字间距（em）-0.2–1 步长 0.01 |
background | color | "#020805" | 背景颜色 |
leafCount | number | 170 | 每次扫动的叶片数量 40–320 步长 1 |
stayCount | number | 5 | 保留下来的叶片数量 0–20 步长 1 |
sweepSpeed | number | 1 | 扫动速度 0.3–3 步长 0.05 |
retainedBreeze | number | 1 | 保留叶片的微风强度 0–2 步长 0.05 |
运行时契约
- 注册一个暂停的 GSAP 时间线为
window.__timelines["canopy-part-title"]。 - 在
hf-seek自定义事件触发时重新同步；每一帧都是时间的封闭函数（仅使用种子伪随机数生成器，无 rAF 循环，无 Date.now）。 - 渲染器：three.js 0.170.0，GSAP 3.14.2，Canvas 2D，后期处理，种子伪随机数生成器，阴影贴图。每个活动实例大约占用 350 MB 内存；建议每次只运行一个实例。
- 外部运行时依赖：
https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js，https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js，https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/EffectComposer.js，https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/RenderPass.js，https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/BokehPass.js。 - 来自 Google Fonts 的 Web 字体：Gelasio。
编辑规则（来自源项目）
- 确保
data-composition-variables是一个单引号属性，其中包含纯"JSON。切勿通过 Studio 的设计面板保存它。 - 不要在静态标记中放置
<canvas>；应在运行时创建。 - 保持每个视觉状态均为 t（时间）的函数；seek 安全是可渲染模块的关键。