Code Slice Hero
一个完整方格表面承载一个无缝标题。虚拟光标扫过表面，附近的单元格会响应其高斯深度场，产生提升和倾斜效果，只有与任一标题轮廓相交的单元格才会翻转，揭开后层标题。整个网格是一次实例化的 WebGL 2 绘制，带有共享的前/后纹理对，外加一个批处理投影阴影通道。文字、字号和方格单元尺寸相互独立，因此磁贴永远不会拉伸。扫动方向、缓动强度、光标半径、衰减、深度、反弹和阴影均为变量。
组合 ID：code-slice-hero。时长 8 秒，30 fps，1920×1080。
文件
code-slice-hero.html（24 KB）assets/Geist-Bold.ttf（65 KB）assets/Geist-OFL.txt（4 KB）assets/gsap-3.14.2.min.js（128 KB）assets/GSAP-NOTICE.txt（1 KB）shadows.js（10 KB）surface.js（8 KB）
安装
使用 npx hyperframes add code-slice-hero 安装；默认情况下，上述文件会放置在 compositions/code-slice-hero/ 目录下。然后从宿主 index.html 中挂载该区块：
<div
data-composition-id="code-slice-hero"
data-composition-src="compositions/code-slice-hero/code-slice-hero.html"
data-start="0"
data-duration="8"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
直接针对组合文件进行渲染，使用自定义值：
npx --yes [email protected] render 'compositions/code-slice-hero/code-slice-hero.html' --variables '{"headline":"MAKE IT","reverseHeadline":"MATTER."}'
变量
运行时通过 window.__hyperframes.getVariables() 读取；在组合根元素上声明为 data-composition-variables（单引号属性，纯 JSON）。
| id | 类型 | 默认值 | 标签/范围 |
|---|---|---|---|
headline | 字符串 | "MAKE IT" | 文字 · 前层标题最多 32 个字符 |
reverseHeadline | 字符串 | "MATTER." | 文字 · 后层标题最多 32 个字符 |
direction | 枚举 | "left-to-right" | 运动 · 扫动方向 (left-to-right / right-to-left) |
sweepDuration | 数字 | 4.2 | 运动 · 扫动持续时间 2.6–4.5 步长 0.05 |
sweepEaseStrength | 数字 | 3 | 运动 · 扫动缓动强度 0–3 步长 0.05 |
flipDuration | 数字 | 0.75 | 运动 · 每个磁贴翻转时间 0.65–1.65 步长 0.05 |
cursorRadius | 数字 | 210 | 光标 · 影响半径 160–480 步长 10 |
cursorFalloff | 数字 | 1.4 | 光标 · 影响衰减 0.4–3.5 步长 0.05 |
cursorDepth | 数字 | 80 | 光标 · 深度 (+ 朝向相机) -320–320 步长 10 |
tiltStrength | 数字 | 55 | 光标 · 拉/倾斜强度 0–55 步长 1 |
noiseStrength | 数字 | 2 | 运动 · 有机变化 0–2 步长 0.05 |
flipBounce | 数字 | 0.15 | 运动 · 弹性翻转反弹 0–0.8 步长 0.05 |
cellSize | 数字 | 112 | 切片 · 方形单元格尺寸 24–120 步长 4 |
formationScale | 数字 | 1 | 切片 · 局部排列比例 0.94–1 步长 0.001 |
fontSize | 数字 | 310 | 字体 · 最大尺寸 160–480 步长 5 |
behindColor | 颜色 | "#212121" | 表面 · 磁贴后的背景颜色 |
shadowStrength | 数字 | 0.19 | 表面 · 投影阴影强度 0–0.65 步长 0.01 |
shadowSoftness | 数字 | 4 | 表面 · 投影阴影柔化 0.5–4 步长 0.1 |
运行时契约
- 一个暂停的 GSAP 时间线，注册为
window.__timelines["code-slice-hero"]。 - 通过
hf-seekCustomEvent 重新同步；每一帧都是时间的闭合形式函数（仅使用带种子的 PRNG，没有 rAF 循环，没有 Date.now）。 - 渲染器：GSAP，Canvas 2D，带种子的 PRNG。
- 外部运行时依赖：无（本地提供）。
- 本地字体：assets/Geist-Bold.ttf。
编辑规则（来自源项目）
- 保持
data-composition-variables为单引号属性，使用纯"JSON。切勿通过 Studio 的设计面板保存它。 - 不要在静态标记中放置
<canvas>；在运行时创建它。 - 保持每个视觉状态都是 t 的函数；seek 安全性是使区块可渲染的关键。