1实现原理 · 为什么它能做到
产出镜头：Voronoi 切出的玻璃板从纵深飞入并旋转，落位拼成标题的剪影，再越过相机飞出；tileCount 可退化为 1，变成一整块玻璃当标题面。
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.
注：这里在做什么：用「碎玻璃拼字」做标题揭示，落位即字形——碎片布局由字形轮廓决定；同一块积木用参数覆盖「碎裂」与「整面」两种观感。
覆盖性由算法保证：每片是「抖动斑块」与「它的 Voronoi 胞」做 Sutherland–Hodgman 裁剪的结果，所以碎片永远盖住字形，不会露出空隙。
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.
注：这里在做什么：把「拼合无缝隙」从手工调参变成几何构造的必然结果（类似 cuboid-carousel 的间距推导）。
玻璃与 matcap 表面逐片加雾；z 轴飞行与缓动解耦，因此碎片的纵深穿越在视觉上是可读的（不会一眨眼到位）。
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.
注：这里在做什么：缓动只控制进度，z 距离另设（zDist/zOut/easePow 等变量），所以能做出「穿过相机」的纵深。
重构层面：composition 只有 16 KB，重活在一个 549 KB 的内联打包产物 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.
注：这里在做什么：把「composition 是宿主渲染单元的薄壳、重逻辑在打包产物里」这条 HF 惯例说清楚；代价是改代码要重新内联。
重建管线是一个小脚本：因为源码用了顶层 await（HDR/matcap/字体加载），而 HF 子合成要求 classic IIFE，所以先把 import 提出来、body 包进 async IIFE，再交给 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.
注：这里在做什么：这是本块能被 HF 渲染的前置条件——一个格式转换脚本，而不是业务逻辑。
监听器与时间线做单例化：重入会堆叠 hf-seek 监听与旧 paused 时间线，脚本显式移除旧监听、kill 旧时间线，并在 pagehide（非 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.
注：这里在做什么：Studio 会重复求值合成脚本，所以「重复执行」被当成正常情况处理——这在同批块里是最完整的一处。
确定性：注释明写无 rAF、无积分器、无 Math.random()；碎片布局由种子决定，且在字体加载完成后构建（格子选择要采样栅格化后的文字）。
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).
注：这里在做什么：字体加载与布局构建的先后被明确，否则字形宽度变化会让 Voronoi 格子采样错位。
2核心能力
01Voronoi 玻璃拼贴标题镜头（1920×1080、12.16s、19 变量）
02碎片数量与形态可调：tileCount 1–400、roundness、bevel、meshSmooth、轮廓扰动 chaos、tile gap
03飞入/飞出分段可控，且纵深与缓动解耦（flyInTime/flyOutTime/easePow/sideDist/zDist/zOut）
04HDR 环境 + matcap 玻璃材质 + 逐片雾（fog 距离 0–400，0 = 关闭）
05双字体随块分发：Geist（Regular/SemiBold/Bold）与 Cormorant Garamond，均带 OFL 文本
06监听器/时间线单例纪律 + pagehide 释放（含 bfcache 判断）
07装机期从官方 CDN 补一张 matcap 贴图
08脱离 Studio 也能出片：直接渲染并覆盖标题与碎片数
3外部依赖
| 类型 | 依赖 |
|---|---|
| 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） |
4风险提醒 风险提醒：蓝色 · 知晓即可
风险提醒：蓝色 · 知晓即可
- 改代码门槛高 — 要改观感得编辑 .mjs 再用 esbuild 重新内联进 composition；且分发清单不含 .mjs（见 second_pass 的 discrepancy），项目内需自留源码。
- 产物期 CDN 依赖 — gsap 与 d3-delaunay 由浏览器在渲染期从 jsdelivr 拉取；离线环境需本地化，否则 Voronoi 直接算不出来。
- 装机需联网 — matcap 贴图在安装时从 static.heygen.ai 拉取（registry-item 的 url 字段）。
- 重建脚本经 npx 取包 — build-bundle.mjs 用 npx esbuild；本地未安装时会从 npm 下载最新 esbuild 执行（仅重建路径）。
风险提醒：蓝色，知晓即可。判级对象＝本 block 目录（SKILL.md + composition + 内联打包产物 glass-main.js + 源码 .mjs + 重建脚本 + HDR/字体）：无凭证/env 读取、无数据外发、无敏感路径访问。产物期浏览器从 jsdelivr 取 gsap 与 d3-delaunay（范式附录A第2条：产物期引用不判级，仅列出端点）；装机期由官方 CLI 到 static.heygen.ai 拉 1 张 matcap 贴图。目录内可执行脚本只有重建用的 build-bundle.mjs（人工执行，内部调 npx esbuild 并把结果写回 assets/glass-main.js，临时文件会清理）——属「本地脚本/本地读写」，故取 blue。供应链提示（不改档位）：build-bundle.mjs 走 npx 解析 esbuild，若本地未安装会从 npm 取最新包执行；仅在主动重建时有此面。
5第二遍独立确认
- [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。
6结论
适合：需要「玻璃/碎片拼字」质感的标题卡（12s），且能接受运行时从 CDN 取 gsap/d3-delaunay、并愿意在改代码时走 esbuild 重建流程的项目。
不适合：要求零外链离线渲染（需先把两个 CDN 脚本本地化）；希望直接改 composition 内联代码就能调参的重度改造场景（本块逻辑在打包产物里，改的是 .mjs 源码）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 glass-shard-title.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentf39a3f1b95ae6b82…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 为实时上游，内容可能已更新。