Back to Details

glass-shard-title

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Glass Shard Title

玻璃碎片标题

Voronoi-cut glass panes fly in from depth, rotating, and land as a tiled silhouette of the headline, then fly out past the camera. Each shard is a Sutherland–Hodgman clip of a jittered blob against its Voronoi cell, so the pieces always cover the type. Glass and matcap surfaces get per-fragment fog; the z-flight is decoupled from the ease so shards visibly traverse it. Tile count 1 gives a single pane.
Composition id: 
glass-shard-title
. Duration 12.16 s at 30 fps, 1920×1080.
Voronoi 切割的玻璃片从深处飞入、旋转，最后拼贴成标题文字的剪影，再飞越摄像机。每块碎片都是经过抖动的 blob 与其 Voronoi 胞元进行 Sutherland–Hodgman 裁剪的结果，因此碎片总能覆盖住字形。玻璃与 matcap 表面带有逐片元雾效；Z 轴飞行与缓动解耦，使碎片能清晰地穿越雾层。tileCount 为 1 时呈现单块玻璃。
composition id：
glass-shard-title
。时长 12.16 秒 @ 30 fps，分辨率 1920×1080。

Files

文件

  • 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
    (fetched from the CDN at install)
  • 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 获取）

Install

安装

Install with 
npx hyperframes add glass-shard-title
; by default the files above land under 
compositions/glass-shard-title/
. Then mount the block from the host 
index.html
:
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>
Render with custom values by targeting the composition file directly:
sh
npx --yes hyperframes@0.8.12 render 'compositions/glass-shard-title/glass-shard-title.html' --variables '{"headline":"Designed in glass","tileCount":8}'
使用 
npx hyperframes add glass-shard-title
安装；默认情况下上述文件会放在 
compositions/glass-shard-title/
下。然后在宿主 
index.html
中挂载该 block：
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>
通过直接指定 composition 文件，可以使用自定义值渲染：
sh
npx --yes hyperframes@0.8.12 render 'compositions/glass-shard-title/glass-shard-title.html' --variables '{"headline":"Designed in glass","tileCount":8}'

Variables

变量

Read at runtime via 
window.__hyperframes.getVariables()
; declared on the composition root as 
data-composition-variables
(single-quoted attribute, plain JSON).
idtypedefaultlabel / range
headline
string
"Designed in glass"
Headline max 40 chars
tileCount
number
8
Tiles 1–400 step 1
roundness
number
0.4
Roundness (0-1) 0–1 step 0.01
bevel
number
0.35
Bevel (0-1) 0–1 step 0.01
meshSmooth
number
0.6
Surface smoothness (0-1) 0–1 step 0.01
flyInTime
number
2.3
Fly-in time (s) 0.2–6 step 0.05
flyOutTime
number
2.4
Fly-out time (s) 0.2–6 step 0.05
stagger
number
0.27
Stagger (0-1) 0–1 step 0.01
flyInRotation
number
5
Fly-in rotation (0-60) 0–60 step 0.1
flyOutRotation
number
6
Fly-out rotation (0-6) 0–6 step 0.1
chaos
number
0.25
Outline chaos (0-1) 0–1 step 0.01
padding
number
1
Edge padding (0-1) 0–1 step 0.01
sizeVariance
number
0.35
Size variance (0-1) 0–1 step 0.01
gap
number
0.03
Tile gap 0–0.3 step 0.002
easePow
number
10
Fly-in position ease (1-10) 1–10 step 0.1
sideDist
number
3
Side fly distance 0–60 step 0.5
zDist
number
-42
Z fly-from (negative) -400–0 step 2
zOut
number
14
Z fly-out to (+ = past camera) -400–60 step 2
fog
number
36
Fog distance (0 = off) 0–400 step 2
运行时通过 
window.__hyperframes.getVariables()
读取；声明在 composition 根元素的 
data-composition-variables
属性上（单引号属性，纯 JSON）。
idtype默认值标签 / 范围
headline
string
"Designed in glass"
标题最多 40 字符
tileCount
number
8
碎片数 1–400 步长 1
roundness
number
0.4
圆度 0–1 步长 0.01
bevel
number
0.35
倒角 0–1 步长 0.01
meshSmooth
number
0.6
表面平滑度 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

Runtime contract

运行时契约

  • One paused GSAP timeline registered as 
    window.__timelines["glass-shard-title"]
    .
  • Re-syncs on the 
    hf-seek
    CustomEvent; every frame is a closed-form function of time (seeded PRNG only, no rAF loops, no Date.now).
  • Renderer: three.js 0.181.2 (bundled), GSAP 3.14.2, Canvas 2D, GLSL shaders, HDR environment, Matcap, Seeded PRNG, d3-delaunay, Shadow maps. Budget roughly 350 MB per live instance; run one at a time.
  • External runtime dependencies: 
    https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js
    , 
    https://cdn.jsdelivr.net/npm/d3-delaunay@6.0.4/dist/d3-delaunay.min.js
    .
  • Local fonts: assets/fonts/Geist-Regular.ttf, assets/fonts/Geist-SemiBold.ttf, assets/fonts/Geist-Bold.ttf.
  • Bundled code is inlined into the composition (assets/glass-main.js); rebuild with esbuild and re-inline after editing the .mjs source.
  • 一个暂停的 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/gsap@3.14.2/dist/gsap.min.js
    、
    https://cdn.jsdelivr.net/npm/d3-delaunay@6.0.4/dist/d3-delaunay.min.js
    。
  • 本地字体：assets/fonts/Geist-Regular.ttf、assets/fonts/Geist-SemiBold.ttf、assets/fonts/Geist-Bold.ttf。
  • 打包后的代码会内联到 composition 中（assets/glass-main.js）；编辑 .mjs 源码后使用 esbuild 重新构建并再次内联。

Editing rules (from the source project)

编辑规则（来自源项目）

  1. Keep 
    data-composition-variables
    a single-quoted attribute with plain 
    "
    JSON. Never save it through Studio's Design panel.
  2. Do not put 
    <canvas>
    in static markup; create it at runtime.
  3. Keep every visual state a function of t; seek-safety is what makes the block renderable.
  1. 保持 
    data-composition-variables
    为单引号属性，内部为普通 
    "
    JSON。切勿通过 Studio 的 Design 面板保存它。
  2. 不要在静态标记中放置 
    <canvas>
    ；请在运行时创建。
  3. 让所有视觉状态都成为 t 的函数；seek 安全性是 block 可渲染的关键。