关于 canopy-part-title
这是用于 Hyperframes 的树叶标题动画组合，以可调的文字、叶片运动和残留叶片微风揭示标题，适合制作可按时间定位的短片动画。
主要功能
- 01叶幕分开以揭示标题
- 02第二波叶片掠过镜头
- 03可调文字与叶片运动
- 04残留叶片随微风摆动
- 0512 秒、1080p 组合
适用场景
- 01制作植物主题标题揭示
- 02依次呈现多个标题
- 03调整文字与叶片扫过节奏
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/canopy-part-title确认已加载。
附带文件canopy-part-title.htmlregistry-item.json
详细介绍
Canopy Part Title
一片纹理细腻的浓密树叶以浅景深掠过画面，随后分开，露出第一条标题；第二批树叶层次更深，带着第二条标题掠过镜头。少量树叶留在文字上，并持续随微风轻摆。字体、字重、字号、字距、树叶数量、掠过速度以及残留树叶的摇曳幅度均可调整。
Composition id：canopy-part-title。时长 12 s，帧率 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 | type | default | label / range |
|---|---|---|---|
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-seekCustomEvent 上重新同步；每一帧都是时间的闭式函数（仅使用带种子的 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 的网络字体：Gelasio。
编辑规则（来自源项目）
- 将
data-composition-variables保持为单引号属性，JSON 使用普通的"。切勿通过 Studio 的 Design 面板保存它。 - 不要在静态标记中放入
<canvas>；应在运行时创建。 - 所有视觉状态都必须是 t 的函数；确保可安全跳转，才能让该区块可渲染。
评论
支持 Markdown