glass-shard-title

玻璃碎片标题

Voronoi 切割的玻璃片从景深中飞入、旋转，最后拼成标题的平铺剪影，然后飞过镜头离开。每块碎片都是通过 Sutherland–Hodgman 算法将一个带抖动的 blob 裁剪到其 Voronoi 单元中得到的，因此碎片始终能覆盖文字。玻璃和 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.01
bevel	数字	0.35	倒角（0–1），步长为 0.01
meshSmooth	数字	0.6	表面平滑度（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.01
flyInRotation	数字	5	飞入旋转（0–60），步长为 0.1
flyOutRotation	数字	6	飞出旋转（0–6），步长为 0.1
chaos	数字	0.25	轮廓混乱度（0–1），步长为 0.01
padding	数字	1	边缘留白（0–1），步长为 0.01
sizeVariance	数字	0.35	尺寸变化（0–1），步长为 0.01
gap	数字	0.03	平铺间隙，0–0.3，步长为 0.002
easePow	数字	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 CustomEvent 上重新同步；每一帧都是时间的闭式函数（仅使用带种子的 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 重新构建并再次内联。

编辑规则（摘自源项目）

1. 将 data-composition-variables 保持为单引号属性，JSON 使用普通的 "。切勿通过 Studio 的 Design 面板保存它。
2. 不要在静态标记中放入 <canvas>；应在运行时创建。
3. 让每个视觉状态都由 t 决定；确保可安全跳转时间，才能让区块正常渲染。