1实现原理 · 为什么它能做到
产出镜头：整片带纹理的树冠以浅景深扫过画面，随后「分开」露出第一行标题；第二批做了深度抬升的叶片把第二行标题带过镜头，最后少量叶片留在字面上继续轻摆。
registry/blocks/canopy-part-title/SKILL.md
A dense canopy of textured leaves sweeps across the frame with shallow depth of field, then parts to uncover the first headline; a second, depth-lifted batch carries the second headline past the camera. A handful of leaves stay behind on the type and keep a light breeze.
注：这里在做什么：把「标题揭示」做成物理化的遮挡物分离（叶片＝遮罩），并预置双标题节拍（title card，12s）。
作为官方「积木」分发：一条 `npx hyperframes add canopy-part-title` 按 registry-item 的 files→target 映射把 composition 与贴图落到 compositions/canopy-part-title/，再由宿主 index.html 用 data-composition-src 挂载。
registry/blocks/canopy-part-title/SKILL.md
Install with `npx hyperframes add canopy-part-title`; by default the files above land under `compositions/canopy-part-title/`. Then mount the block from the host `index.html`: … data-composition-id="canopy-part-title" … data-composition-src="compositions/canopy-part-title/canopy-part-title.html"
注：这里在做什么：块不是「模板文本」而是可安装单元——安装器读 registry-item.json 决定落盘路径，SKILL.md 只负责告诉 agent 怎么挂与怎么调。
参数面完全外置：11 个变量声明在 composition 根节点的 data-composition-variables（单引号属性 + 纯 JSON），运行时经 window.__hyperframes.getVariables() 读取；读取失败包在 try/catch 里，退回脚本内默认值，不让畸形声明把画面打空。
registry/blocks/canopy-part-title/canopy-part-title.html
if (window.__hyperframes && window.__hyperframes.getVariables) V = window.__hyperframes.getVariables() || {}; } catch (e) { /* corrupt declarations must not blank the composition */ }
注：这里在做什么：声明式变量是 HF Studio 的旋钮契约；防御式读取，保证渲染管线不会因属性解析问题产出空白帧。
可渲染性靠确定性契约：一条 paused 的 GSAP 时间线注册在 window.__timelines["canopy-part-title"]，seek 时监听 hf-seek 自定义事件重同步，每一帧都是时间的闭式函数（只用种子 PRNG，无 rAF 循环、无 Date.now）。
registry/blocks/canopy-part-title/SKILL.md
One paused GSAP timeline registered as `window.__timelines["canopy-part-title"]`. … Re-syncs on the `hf-seek` CustomEvent; every frame is a closed-form function of time (seeded PRNG only, no rAF loops, no Date.now).
注：这里在做什么：headless 渲染器逐帧 seek 而不是播放，所以任何依赖真实时钟/累积积分器的写法都会毁掉可渲染性。
随机性全部换成种子 PRNG：布局与主时间线脚本在 Three 模块之前同步执行，注释明写「Zero Math.random」，各叶片批次用独立常数种子（mulberry32），保证同一时刻永远同一画面。
registry/blocks/canopy-part-title/canopy-part-title.html
Seeded layout + master timeline. Runs synchronously before the Three module so the timeline exists the moment the page is scriptable. Zero Math.random. … var rand = mulberry32(0x6a756e67);
注：这里在做什么：把「自然感随机」改造成固定种子的确定性分布——视觉上仍像随机，渲染却可复现。
渲染栈是 three.js 0.170.0（jsdelivr importmap）+ EffectComposer/BokehPass 景深 + 阴影；SKILL.md 明写单实例约 350 MB、一次只跑一个，并要求 canvas 在运行时创建（静态 markup 里放 <canvas> 会让 Studio 变量解析器失败）。
registry/blocks/canopy-part-title/SKILL.md
Renderer: three.js 0.170.0, GSAP 3.14.2, Canvas 2D, Post-processing, Seeded PRNG, Shadow maps. Budget roughly 350 MB per live instance; run one at a time.
注：这里在做什么：把资源预算写进 SKILL.md——registry 积木里少见的显式内存约束，提醒编排时别把多个重块并列塞进一页。
2核心能力
01树冠分离式双标题开场镜头（1920×1080、12s、11 个变量）
02叶片密度与留驻风感可调：leafCount 170（40–320）、stayCount 5（0–20）、sweepSpeed、retainedBreeze
03后处理景深与阴影：EffectComposer + RenderPass + BokehPass 三个 three addon 直接 import
04运行时程序化生成贴图：叶片 color/normal 画布与尘埃 sprite 都用 canvas 2D 现画，随块分发的两张 webp 之外不再依赖外部素材
05标题字体可换：默认 Helvetica，运行时把字体名 encodeURIComponent 后拼进 Google Fonts 链接动态加载（自带示例为 Gelasio）
06脱离 Studio 也能出片：可直接对 composition 文件渲染并覆盖变量
07canvas 一律运行时创建（避开 Studio 变量解析器对静态 <canvas> markup 的失败），并在脚本里暴露 window.__cptInstance.dispose() 供单实例内存释放
3外部依赖
| 类型 | 依赖 |
|---|---|
| cli | HyperFrames 官方 CLI（add / render） |
| network | jsDelivr CDN：GSAP 3.14.2（产物期浏览器执行的脚本） |
| network | jsDelivr CDN：three.js 0.170.0（importmap + 三个 postprocessing addon） |
| network | Google Fonts（产物期浏览器拉取字体；Gelasio 为自带示例） |
| package | three.js 0.170.0 + GSAP 3.14.2（浏览器端运行，非本地 node 依赖） |
4风险提醒 风险提醒：蓝色 · 知晓即可
风险提醒：蓝色 · 知晓即可
- 产物期依赖 CDN — three/gsap 与 Gelasio 字体由浏览器在渲染时拉取（html 第 10–16、333–340 行）；离线或有网管限制的环境需先本地化，否则渲染期取不到依赖。
- 单实例内存较重 — SKILL.md 自述约 350 MB/实例并要求一次只跑一个；同页并列多个重块有内存与首帧编译风险。
- 变量属性格式脆弱 — SKILL.md 明写必须保持单引号 + 纯 JSON、且不要经 Studio Design 面板保存；一旦被改写，旋钮全部回默认（脚本虽有 try/catch 兜底）。
- 换字体改变构图细节 — 留驻叶片贴在字面上（stayCount 与字形相关），换字体/字重后需人工复核留驻叶片的观感。
风险提醒：蓝色，知晓即可。判级对象＝本 block 目录（SKILL.md + composition HTML + 2 张 webp + registry-item.json）：无凭证/环境变量读取、无 shell 或数据外发脚本、无本地写盘代码。唯一网络面是产物期由浏览器拉取 jsdelivr 的 gsap/three 与 Google Fonts 的 Gelasio——按范式附录A第2条「产物期引用不判级」，仅在此列出端点。安装与渲染走官方 CLI 生态（npx hyperframes add/render）。据此取 blue。注意：three/gsap 走 CDN 意味着受限网络或离线渲染前需先缓存或换成随包副本。
5第二遍独立确认
- [ok] 变量数与声明一致性（frontmatter 自称 11 variables） — 脚本实测：SKILL.md 变量表 11 行、composition 的 data-composition-variables 解析出 11 项、frontmatter 写 11 —— 三者一致。
- [ok] 「无 Math.random / Date.now / rAF」声称 — 对 html 全文 grep：Math.random、Date.now、performance.now、requestAnimationFrame 零命中；注释逐字写着 Zero Math.random，随机全部来自 mulberry32 常数种子（主批次 0x6a756e67、抬升批 0x6c696674）。
- [ok] 外部依赖单真实性 — html 第 16 行 gsap 脚本、第 333–340 行 importmap 与三个 postprocessing import、第 10–13 行 Google Fonts link 均逐字命中；SKILL.md 的 External runtime dependencies 行与之一致。
- [ok] 凭证/密钥接触面 — 对 SKILL.md / html / registry-item.json 扫描 process.env、secret、token、api_key、cookie：零命中。
- [ok] registry-item 文件清单 vs 盘上文件 — 声明 4 个文件全部存在，且无远端 url 兜底（与本块不依赖远端二进制一致）。
- [ok] 时长与尺寸一致性 — registry-item duration 12 / dimensions 1920×1080 与 html data-duration="12"、SKILL.md 标题行 12s 一致。
6结论
适合：需要「自然/有机感」开场或章节标题卡、时长约 12s、可由变量直接换文案与字体密度的场景（品牌短片、产品片开场、社媒标题卡）。
不适合：需要旁白/多场景编排的长视频（应由 general-video 一类流程承担）；对离线渲染有硬要求又不想自备本地 three/gsap 副本的流水线；需要精确排印控制（默认 Helvetica，字体需自备或联网）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 canopy-part-title.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent92b16eff05db15f7…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库heygen-com / heygen-com/hyperframes
原始 GitHubheygen-com/hyperframes ↗
Stars44283
最近推送2026-09-06
本 skill commit
d2f0bc7f34许可Apache-2.0（仓库根 LICENSE = Apache License Version 2.0；块内随带第三方许可文本：three.js MIT、GSAP 标准许可、Geist/Archivo/Cormorant Garamond OFL 等）
本站信息
收录日期2026-09-06
分类内容创作
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。