Content & Media Creation · heygen-com/hyperframes
glass-shard-title
Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.
L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-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: Glass panels cut via Voronoi fly in and rotate from the depth, assemble into the headline's silhouette, and then fly past the camera; tileCount can degenerate to 1, turning into a single sheet of glass serving as the headline surface.
registry/blocks/glass-shard-title/SKILL.md
Voronoi-cut glass panes fly in from depth, rotating, and land as a tiled silhouette of the headline, then fly out past the camera. … Tile count 1 gives a single pane.
What is happening here: Uses "shattered glass assembling into text" for the headline reveal, where landed positions form glyphs—shard layouts are dictated by font glyph contours; a single block covers both "shattered" and "monolithic" aesthetics via parameters.
Coverage is guaranteed algorithmically: Each shard is the result of Sutherland–Hodgman clipping between a "jittered blob" and its "Voronoi cell", ensuring shards always fully cover the glyph without exposing gaps.
registry/blocks/glass-shard-title/SKILL.md
Each shard is a Sutherland–Hodgman clip of a jittered blob against its Voronoi cell, so the pieces always cover the type.
What is happening here: Transforms "seamless assembly" from manual parameter tuning into a deterministic geometric guarantee (similar to the spacing derivation in cuboid-carousel).
Per-shard fog applied to glass and matcap surfaces; Z-axis flight is decoupled from easing, making the depth traversal of shards visually legible (rather than snapping into place instantly).
registry/blocks/glass-shard-title/SKILL.md
Glass and matcap surfaces get per-fragment fog; the z-flight is decoupled from the ease so shards visibly traverse it.
What is happening here: Easing only governs progress while Z distance is configured separately (via variables like zDist/zOut/easePow), enabling a tangible "passing through the camera" depth.
Refactoring level: The composition is only 16 KB; heavy logic resides in a 549 KB inlined bundle at assets/glass-main.js (three 0.181.2 + d3-delaunay + GLSL).
registry/blocks/glass-shard-title/SKILL.md
Bundled code is inlined into the composition (assets/glass-main.js); rebuild with esbuild and re-inline after editing the .mjs source.
What is happening here: Articulates the HF convention that "the composition is a thin shell for host rendering, while heavy logic resides in the bundled artifact"; the trade-off is requiring a re-bundle when modifying code.
The rebuild pipeline is a small script: Because the source uses top-level await (for HDR, matcap, and font loading) while HF sub-compositions require classic IIFEs, it hoists imports, wraps the body in an async IIFE, and delegates bundling to npx esbuild.
registry/blocks/glass-shard-title/build-bundle.mjs
The source uses top-level await (HDR + matcap + font loads), which esbuild cannot emit in the classic-IIFE format that HyperFrames sub-compositions require, so the body is wrapped in an async IIFE with the imports hoisted before bundling.
What is happening here: This is the prerequisite for rendering the block in HF—a format conversion script rather than business logic.
Listeners and timelines are singleton-managed: Re-entry stacks hf-seek listeners and stale paused timelines; the script explicitly removes old listeners, kills old timelines, and cleans up on pagehide (excluding bfcache).
registry/blocks/glass-shard-title/glass-shard-title.html
Exactly one listener and one live timeline per document. A second evaluation of this script would otherwise stack another hf-seek listener and leave the previous paused timeline registered, so every seek would drive N timelines and repaint N times.
What is happening here: Studio repeatedly evaluates composition scripts, so "repeated execution" is handled as normal behavior—making this the most thoroughly managed block in this batch.
Determinism: Comments explicitly state no rAF, no numerical integrators, and no Math.random(); shard layout is seeded and constructed only after font loading completes (cell selection requires sampling the rasterized text).
registry/blocks/glass-shard-title/glass-shard-title.html
No rAF, no integrators, no Math.random(). Shard layout is seeded and built after fonts load (cell selection samples the rasterised text).
What is happening here: The ordering between font loading and layout construction is made explicit, preventing Voronoi cell sampling offsets caused by glyph width variations.
2Core Capabilities
01Voronoi glass-tiled headline shot (1920×1080, 12.16s, 19 variables)
02Adjustable shard count and shape: tileCount 1–400, roundness, bevel, meshSmooth, contour chaos, tile gap
03Controllable fly-in/fly-out stages with depth decoupled from easing (flyInTime/flyOutTime/easePow/sideDist/zDist/zOut)
04HDR environment + matcap glass material + per-shard fog (fog distance 0–400, 0 = disabled)
05Dual fonts bundled with the block: Geist (Regular/SemiBold/Bold) and Cormorant Garamond, both with OFL license files
06Strict listener/timeline singleton lifecycle + pagehide cleanup (with bfcache detection)
07Fetches one matcap texture from the official CDN during installation
08Renders standalone outside Studio: direct rendering with overrides for headline and tile count
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| cli | HyperFrames 官方 CLI（add / render） |
| network | jsDelivr CDN：GSAP 3.14.2（产物期脚本） |
| network | jsDelivr CDN：d3-delaunay 6.0.4（Voronoi 计算） |
| network | 装机期资产：matcap 贴图（官方 CDN，安装时拉取） |
| package | 构建依赖（仅重建时需要）：npx esbuild + three（需 0.185.1 起才带 HDRLoader） |
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/: Execute local script or command: assets/glass-main.js (bundled artifact executed within composition: Voronoi/clipping/glass material and timeline driver)
- 网络端点: Declare external network access: cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js (artifact runtime: executed in browser)
- 本地工作目录: File I/O and artifact output: Runtime (composition): no disk writes; glass meshes and textures reside entirely in memory.
Audit Notes: . Evaluation target = this block directory (SKILL.md + composition + inlined bundle glass-main.js + .mjs source + rebuild script + HDR/fonts): no credential/env reading, no outbound data exfiltration, no sensitive path access. In the artifact stage, the browser fetches gsap and d3-delaunay from jsdelivr (Normative Appendix A Rule 2: artifact-stage runtime references are not scored, endpoints are only listed); during installation, the official CLI pulls 1 matcap texture from static.heygen.ai. The only executable script inside the directory is build-bundle.mjs for rebuilding (manually executed, invokes npx esbuild internally and writes results back to assets/glass-main.js, cleaning up temporary files)—falling under "local script/local I/O", assigned blue. Supply chain note (does not alter rating): build-bundle.mjs invokes esbuild via npx; if not locally installed, it fetches the latest package from npm; this exposure only occurs during manual rebuilds.
5Second-Pass Verification
- [ok] 变量数与声明一致性（frontmatter 自称 19 variables） — 脚本实测：SKILL.md 变量表 19 行、html data-composition-variables 解析出 19 项、frontmatter 写 19 —— 一致。
- [discrepancy] 「可编辑 .mjs 源码」在安装后的可达性 — SKILL.md 的 Files 列表含 assets/glass-main.mjs 并指示「改完 .mjs 后重建并重新内联」，但 registry-item.json 的分发清单只列 glass-main.js：安装进项目后不会有那份可编辑源码（本仓库目录里有）。重建前须自行保留源码。
- [ok] 装机期资产声称 — registry-item.json 中 matcap-1.png 带 static.heygen.ai 的 url，盘上确实缺失，与 SKILL.md 括注 fetched from the CDN at install 一致。
- [ok] 重入/释放处理 — html 中确有 removeEventListener(hf-seek)、旧时间线 kill、pagehide + persisted 分支；与注释所述单例纪律相符。
- [ok] 确定性声称 — html 注释写 No rAF, no integrators, no Math.random()；全文 grep Math.random / Date.now / requestAnimationFrame 零命中。
- [ok] 重建脚本的真实行为 — build-bundle.mjs 逐字命中：读 glass-main.mjs → 提出 import → 包 async IIFE 写临时文件 → execFileSync("npx", ["esbuild", …, "--format=iife", "--minify"]) → finally unlinkSync。
6Verdict & Scenarios
Best for: Projects requiring a headline card with a "glass/shard-assembled typography" aesthetic (12s) that accept fetching gsap/d3-delaunay from CDN at runtime and are willing to run the esbuild rebuild flow when modifying code.
Not for: Strict offline rendering requiring zero external links (requires localizing both CDN scripts first); heavy modification workflows expecting direct in-composition code editing for tuning (logic resides in the bundled artifact; modifications must be made in the .mjs source).
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload glass-shard-title.tar.gz
sha256:
Option B · Copy Guide for Agentf39a3f1b95ae6b82…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit d2f0bc7f34.