树冠标题
一个由纹理树叶组成的浓密树冠，以浅景深扫过画面，然后分开露出第一个标题；第二批深度提升的树叶将第二个标题带过镜头。少量树叶留在文字上，保持微风吹动效果。字体、字重、字号、字间距、树叶数量、扫描速度以及留在上面的树叶数量均为变量。
组成 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自定义事件重新同步；每一帧都是时间的封闭形式函数（仅使用种子 PRNG，无 rAF 循环，无 Date.now）。 - 渲染器：three.js 0.170.0，GSAP 3.14.2，Canvas 2D，后期处理，种子 PRNG，阴影映射。每个实时实例预算约 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 安全性是区块可渲染的关键。