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-seek自定义事件上重新同步；每一帧都是时间的闭函数（仅使用种子随机数生成器，无 rAF 循环，无 Date.now）。 - 渲染器：GSAP、Canvas 2D、种子随机数生成器。
- 外部运行时依赖：无（本地提供）。
- 本地字体：assets/Geist-Bold.ttf。
编辑规则（来自源项目）
- 保持
data-composition-variables为单引号属性，内部使用纯"JSON。切勿通过 Studio 的设计面板保存它。 - 不要在静态标记中放置
<canvas>；在运行时创建。 - 保持每个视觉状态为 t 的函数；seek 安全性是区块可渲染的关键。