玻璃碎片标题
从深处飞入的 Voronoi 切割玻璃板，旋转着降落在标题文字的拼贴轮廓中，然后飞过摄像机。每片碎屑都是对抖动斑点进行 Sutherland–Hodgman 裁剪并与其 Voronoi 单元对齐的结果，因此碎片始终覆盖文字。玻璃和 Matcap 表面具有逐片雾效；Z 轴飞行与缓动解耦，使碎片在穿越时清晰可见。平铺数为 1 时显示为单块玻璃板。
组合 ID：glass-shard-title。时长 12.16 秒，30fps，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 | string | "Designed in glass" | 标题最多 40 字符 |
tileCount | number | 8 | 瓦片数 1–400 步长 1 |
roundness | number | 0.4 | 圆角 (0-1) 0–1 步长 0.01 |
bevel | number | 0.35 | 倒角 (0-1) 0–1 步长 0.01 |
meshSmooth | number | 0.6 | 表面平滑度 (0-1) 0–1 步长 0.01 |
flyInTime | number | 2.3 | 飞入时间 (秒) 0.2–6 步长 0.05 |
flyOutTime | number | 2.4 | 飞出时间 (秒) 0.2–6 步长 0.05 |
stagger | number | 0.27 | 交错 (0-1) 0–1 步长 0.01 |
flyInRotation | number | 5 | 飞入旋转 (0-60) 0–60 步长 0.1 |
flyOutRotation | number | 6 | 飞出旋转 (0-6) 0–6 步长 0.1 |
chaos | number | 0.25 | 轮廓混乱度 (0-1) 0–1 步长 0.01 |
padding | number | 1 | 边缘填充 (0-1) 0–1 步长 0.01 |
sizeVariance | number | 0.35 | 尺寸变化 (0-1) 0–1 步长 0.01 |
gap | number | 0.03 | 瓦片间隙 0–0.3 步长 0.002 |
easePow | number | 10 | 飞入位置缓动 (1-10) 1–10 步长 0.1 |
sideDist | number | 3 | 侧向飞行距离 0–60 步长 0.5 |
zDist | number | -42 | Z 轴飞入起点 (负值) -400–0 步长 2 |
zOut | number | 14 | Z 轴飞出终点 (+ = 越过摄像机) -400–60 步长 2 |
fog | number | 36 | 雾距离 (0 = 关闭) 0–400 步长 2 |
运行时约定
- 一个暂停的 GSAP 时间线注册为
window.__timelines["glass-shard-title"]。 - 在
hf-seek自定义事件上进行重新同步；每一帧都是时间 t 的闭式函数（仅使用种子 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 的函数；seek 安全性是使区块可渲染的关键。