Content & Media Creation · heygen-com/hyperframes
canopy-part-title
Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.
L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
Output shot: A fully textured canopy sweeps across the screen with shallow depth of field, then "parts" to reveal the first headline line; a second batch of depth-lifted leaves sweeps the second headline across the screen, leaving a few lingering leaves gently swaying over the text.
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.
What's happening here: Framing the "headline reveal" as a physical occluder parting effect (leaves = mask) and presetting a dual-headline cadence (title card, 12s).
Distributed as an official "block": A single `npx hyperframes add canopy-part-title` command deploys the composition and textures to compositions/canopy-part-title/ according to the files→target mapping in registry-item, and the host index.html mounts it via 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"
What's happening here: The block is not "template text" but an installable unit—the installer reads registry-item.json to determine destination paths, while SKILL.md solely instructs the agent on mounting and tuning.
Fully externalized parameter interface: 11 variables are declared in data-composition-variables on the composition root element (single-quoted attribute + pure JSON) and retrieved at runtime via window.__hyperframes.getVariables(); reads are wrapped in try/catch to fall back to in-script defaults, preventing malformed declarations from rendering blank frames.
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 */ }
What's happening here: Declarative variables serve as the knob contract for HF Studio; defensive reading ensures that attribute parsing issues never cause the rendering pipeline to yield blank frames.
Renderability guaranteed via deterministic contracts: A paused GSAP timeline is registered on window.__timelines["canopy-part-title"], resynchronizing on seek by listening to the hf-seek custom event; every frame is a closed-form function of time (seeded PRNG only, zero rAF loops, zero 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).
What's happening here: Headless renderers seek frame-by-frame rather than playing linearly, meaning any reliance on real-time clocks or cumulative integrators ruins renderability.
Randomness fully replaced by seeded PRNG: Layout and master timeline scripts execute synchronously before Three modules with an explicit "Zero Math.random" comment; individual leaf batches use independent constant seeds (mulberry32) to ensure identical visuals at any given point in time.
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);
What's happening here: Converting "organic-looking randomness" into a fixed-seed deterministic distribution—visually random, yet fully reproducible during rendering.
The rendering stack is three.js 0.170.0 (jsdelivr importmap) + EffectComposer/BokehPass depth of field + shadows; SKILL.md explicitly documents ~350 MB per instance, single-concurrency execution, and requires canvas creation at runtime (placing <canvas> in static markup breaks the Studio variable parser).
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.
What's happening here: Encoding the resource budget directly into SKILL.md—a rare explicit memory constraint for registry blocks, cautioning orchestrators against nesting multiple heavy blocks side-by-side on a single page.
2Core Capabilities
01Canopy-parting dual-headline opening shot (1920×1080, 12s, 11 variables)
02Tunable leaf density and lingering breeze feel: leafCount 170 (40–320), stayCount 5 (0–20), sweepSpeed, retainedBreeze
03Post-processing depth of field and shadows: direct import of three addons (EffectComposer + RenderPass + BokehPass)
04Runtime procedural texture generation: leaf color/normal canvases and dust sprites are generated dynamically via 2D canvas, requiring no external assets beyond the two bundled webp images
05Interchangeable headline typography: defaults to Helvetica, dynamically loading fonts at runtime by interpolating the encodeURIComponent font family into a Google Fonts URL (bundled example: Gelasio)
06Studio-independent rendering: compositions can be rendered directly with CLI variable overrides
07Canvases are always created at runtime (bypassing Studio variable parser failures on static <canvas> markup), exposing window.__cptInstance.dispose() in scripts for single-instance memory cleanup
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| 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 依赖） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
- scripts/: Executes local script or command: canopy-part-title.html — Composition script executed by the renderer/browser (importmap pulls three 0.170.0)
- 网络端点: Declares external network access: cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js (artifact phase: browser execution)
Audit Notes: Assessment target = this block directory (SKILL.md + composition HTML + 2 webp images + registry-item.json): zero credential/environment variable reads, zero shell or data exfiltration scripts, zero local disk-write code. The sole network surface occurs during the artifact phase when the browser fetches gsap/three from jsdelivr and Gelasio from Google Fonts; per Paradigm Appendix A.2, 'artifact-phase references are exempt from grading,' endpoints are listed here for disclosure only. Installation and rendering leverage the official CLI ecosystem (npx hyperframes add/render). Rated 'blue'. Note: Depending on CDN-hosted three/gsap means restricted network or offline rendering pipelines must pre-cache them or replace them with local bundled copies.
5Second-Pass Verification
- [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 一致。
6Verdict & Scenarios
Best for: Scenarios requiring an "organic/natural" opening shot or chapter title card, ~12s duration, with directly customizable copy and density via variables (brand films, product video intros, social media title cards).
Not for: Long-form videos requiring voiceovers or multi-scene orchestration (better handled by pipelines like general-video); rendering pipelines with strict offline requirements unwilling to bundle local three/gsap copies; use cases demanding meticulous typographic typesetting (defaults to Helvetica; custom fonts require bundling or network access).
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload canopy-part-title.tar.gz
sha256:
Option B · Copy Guide for Agent92b16eff05db15f7…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit d2f0bc7f34.