玻璃碎片标题
Voronoi 切割的玻璃板从深处旋转飞入，拼合成标题的剪影轮廓，然后飞出镜头。每个碎片都是抖动斑点经过 Voronoi 单元进行 Sutherland–Hodgman 裁剪得到的结果，因此碎片始终覆盖文字。玻璃和 matcap 表面带有逐片段的雾效；z 轴飞行与缓动解耦，使碎片能够清晰地穿越空间。设置 Tile count 为 1 时显示为单块玻璃。
合成 ID：glass-shard-title。时长 12.16 秒，帧率 30 fps，分辨率 1920×1080。
文件
glass-shard-title.html（16 KB）assets/ferndale_studio_01_1k.hdr（1.6 MB）assets/fonts/Geist-Bold.ttf（65 KB）assets/fonts/Geist-Regular.ttf（65 KB）assets/fonts/Geist-SemiBold.ttf（65 KB）assets/fonts/Geist-OFL.txt（4 KB）assets/fonts/cormorant-garamond.woff2（37 KB）assets/fonts/CormorantGaramond-OFL.txt（4 KB）assets/glass-main.js（549 KB）assets/Three-LICENSE.txt（1 KB）assets/matcap-1.png（安装时从 CDN 获取）
安装
使用 npx hyperframes add glass-shard-title 安装；默认情况下上述文件会放置在 compositions/glass-shard-title/ 目录下。然后在宿主 index.html 中挂载该块：
<div
data-composition-id="glass-shard-title"
data-composition-src="compositions/glass-shard-title/glass-shard-title.html"
data-start="0"
data-duration="12.16"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
通过直接指定合成文件并传入自定义值进行渲染：
npx --yes [email protected] render 'compositions/glass-shard-title/glass-shard-title.html' --variables '{"headline":"Designed in glass","tileCount":8}'
变量
运行时通过 window.__hyperframes.getVariables() 读取；在合成根元素上以 data-composition-variables 属性声明（使用单引号包裹属性值，JSON 格式）。
| id | 类型 | 默认值 | 标签/范围 |
|---|---|---|---|
headline | 字符串 | "Designed in glass" | 标题最多 40 个字符 |
tileCount | 数字 | 8 | 碎片数 1–400 步进 1 |
roundness | 数字 | 0.4 | 圆角程度 (0-1) 0–1 步进 0.01 |
bevel | 数字 | 0.35 | 倒角程度 (0-1) 0–1 步进 0.01 |
meshSmooth | 数字 | 0.6 | 表面光滑度 (0-1) 0–1 步进 0.01 |
flyInTime | 数字 | 2.3 | 飞入时间（秒）0.2–6 步进 0.05 |
flyOutTime | 数字 | 2.4 | 飞出时间（秒）0.2–6 步进 0.05 |
stagger | 数字 | 0.27 | 交错延迟 (0-1) 0–1 步进 0.01 |
flyInRotation | 数字 | 5 | 飞入旋转 (0-60) 0–60 步进 0.1 |
flyOutRotation | 数字 | 6 | 飞出旋转 (0-6) 0–6 步进 0.1 |
chaos | 数字 | 0.25 | 轮廓随机度 (0-1) 0–1 步进 0.01 |
padding | 数字 | 1 | 边缘填充 (0-1) 0–1 步进 0.01 |
sizeVariance | 数字 | 0.35 | 大小差异 (0-1) 0–1 步进 0.01 |
gap | 数字 | 0.03 | 碎片间距 0–0.3 步进 0.002 |
easePow | 数字 | 10 | 飞入位置缓动 (1-10) 1–10 步进 0.1 |
sideDist | 数字 | 3 | 侧面飞行距离 0–60 步进 0.5 |
zDist | 数字 | -42 | Z 轴飞入起点（负值）-400–0 步进 2 |
zOut | 数字 | 14 | Z 轴飞出终点（+ = 越过相机）-400–60 步进 2 |
fog | 数字 | 36 | 雾距离（0 = 关闭）0–400 步进 2 |
运行时约定
- 一个已暂停的 GSAP 时间线，注册为
window.__timelines["glass-shard-title"]。 - 通过
hf-seek自定义事件重新同步；每一帧都是时间的闭式函数（仅使用种子 PRNG，无 rAF 循环，无 Date.now）。 - 渲染器：three.js 0.181.2（捆绑），GSAP 3.14.2，Canvas 2D，GLSL 着色器，HDR 环境，Matcap，种子 PRNG，d3-delaunay，阴影贴图。每个活动实例预算约 350 MB；建议一次只运行一个。
- 外部运行时依赖：
https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js，https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-delaunay.min.js。 - 本地字体：assets/fonts/Geist-Regular.ttf，assets/fonts/Geist-SemiBold.ttf，assets/fonts/Geist-Bold.ttf。
- 捆绑代码已内联到合成文件中（assets/glass-main.js）；编辑 .mjs 源文件后，使用 esbuild 重建并重新内联。
编辑规则（来自源项目）
- 保持
data-composition-variables为单引号包裹的属性，内部使用标准"JSON。切勿通过 Studio 的设计面板保存它。 - 不要在静态标记中放置
<canvas>；应在运行时创建。 - 所有视觉状态必须是时间 t 的函数；寻求安全性是该块可渲染的关键。