Back to Details

code-slice-hero

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Code Slice Hero

Code Slice Hero（代码切片首屏）

A full square-tile surface carries one seamless headline. An imaginary cursor crosses the surface; nearby tiles respond to its Gaussian depth field with lift and tilt, and only the cells intersecting either headline silhouette turn over to reveal the rear headline. The whole grid is one instanced WebGL 2 draw with a shared front/rear texture pair, plus a batched projected-shadow pass. Copy, text size and square cell size are independent, so tiles never stretch. Sweep direction, easing strength, cursor radius, falloff, depth, bounce and shadow are all variables.
Composition id: 
code-slice-hero
. Duration 8 s at 30 fps, 1920×1080.
一个完整的方块平铺表面承载一条无缝的主标题。一个虚拟光标扫过表面；附近的方块响应其高斯深度场，产生抬升和倾斜，只有与任一标题轮廓相交的格子才会翻转，露出后方的标题。整个网格是单个实例化的 WebGL 2 绘制调用，使用共享的前/后纹理对，外加一个批处理的投影阴影通道。文案、文字大小和方块单元尺寸相互独立，因此方块永远不会被拉伸。扫过方向、缓动强度、光标半径、衰减、深度、回弹和阴影均为变量。
组合 ID：
code-slice-hero
。时长 8 秒，30 fps，1920×1080。

Files

文件

  • 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)
  • 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）

Install

安装

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

Variables

变量

Read at runtime via 
window.__hyperframes.getVariables()
; declared on the composition root as 
data-composition-variables
(single-quoted attribute, plain JSON).
| id | type | default | label / range | | ------------------- | ------ | ----------------- | ------------------------------------------------- | -------------- | | 
headline
| string | 
"MAKE IT"
| Copy · Front headline max 32 chars | | 
reverseHeadline
| string | 
"MATTER."
| Copy · Rear headline max 32 chars | | 
direction
| enum | 
"left-to-right"
| Motion · Sweep direction (left-to-right | right-to-left) | | 
sweepDuration
| number | 
4.2
| Motion · Sweep duration 2.6–4.5 step 0.05 | | 
sweepEaseStrength
| number | 
3
| Motion · Sweep easing strength 0–3 step 0.05 | | 
flipDuration
| number | 
0.75
| Motion · Each tile flip 0.65–1.65 step 0.05 | | 
cursorRadius
| number | 
210
| Cursor · Influence radius 160–480 step 10 | | 
cursorFalloff
| number | 
1.4
| Cursor · Influence falloff 0.4–3.5 step 0.05 | | 
cursorDepth
| number | 
80
| Cursor · Depth (+ toward camera) -320–320 step 10 | | 
tiltStrength
| number | 
55
| Cursor · Pull / tilt strength 0–55 step 1 | | 
noiseStrength
| number | 
2
| Motion · Organic variation 0–2 step 0.05 | | 
flipBounce
| number | 
0.15
| Motion · Elastic flip bounce 0–0.8 step 0.05 | | 
cellSize
| number | 
112
| Slices · Square cell size 24–120 step 4 | | 
formationScale
| number | 
1
| Slices · Local formation scale 0.94–1 step 0.001 | | 
fontSize
| number | 
310
| Type · Maximum size 160–480 step 5 | | 
behindColor
| color | 
"#212121"
| Surface · Behind-tile background | | 
shadowStrength
| number | 
0.19
| Surface · Cast shadow strength 0–0.65 step 0.01 | | 
shadowSoftness
| number | 
4
| Surface · Cast shadow softness 0.5–4 step 0.1 |
在运行时通过 
window.__hyperframes.getVariables()
读取；在组合根元素上以 
data-composition-variables
声明（单引号属性，纯 JSON）。
| id | type | default | 标签 / 范围 | | ------------------- | ------ | ----------------- | ------------------------------------------------- | -------------- | | 
headline
| string | 
"MAKE IT"
| 文案 · 前标题最多 32 个字符 | | 
reverseHeadline
| string | 
"MATTER."
| 文案 · 后标题最多 32 个字符 | | 
direction
| enum | 
"left-to-right"
| 运动 · 扫过方向（left-to-right | right-to-left） | | 
sweepDuration
| number | 
4.2
| 运动 · 扫过时长 2.6–4.5 步长 0.05 | | 
sweepEaseStrength
| number | 
3
| 运动 · 扫过缓动强度 0–3 步长 0.05 | | 
flipDuration
| number | 
0.75
| 运动 · 每个方块翻转 0.65–1.65 步长 0.05 | | 
cursorRadius
| number | 
210
| 光标 · 影响半径 160–480 步长 10 | | 
cursorFalloff
| number | 
1.4
| 光标 · 影响衰减 0.4–3.5 步长 0.05 | | 
cursorDepth
| number | 
80
| 光标 · 深度（朝向相机为正） -320–320 步长 10 | | 
tiltStrength
| number | 
55
| 光标 · 拉动 / 倾斜强度 0–55 步长 1 | | 
noiseStrength
| number | 
2
| 运动 · 有机变化 0–2 步长 0.05 | | 
flipBounce
| number | 
0.15
| 运动 · 弹性翻转回弹 0–0.8 步长 0.05 | | 
cellSize
| number | 
112
| 切片 · 方块单元尺寸 24–120 步长 4 | | 
formationScale
| number | 
1
| 切片 · 局部形成缩放 0.94–1 步长 0.001 | | 
fontSize
| number | 
310
| 字体 · 最大尺寸 160–480 步长 5 | | 
behindColor
| color | 
"#212121"
| 表面 · 方块后方背景 | | 
shadowStrength
| number | 
0.19
| 表面 · 投影强度 0–0.65 步长 0.01 | | 
shadowSoftness
| number | 
4
| 表面 · 投影柔和度 0.5–4 步长 0.1 |

Runtime contract

运行时约定

  • One paused GSAP timeline registered as 
    window.__timelines["code-slice-hero"]
    .
  • 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: GSAP, Canvas 2D, Seeded PRNG.
  • External runtime dependencies: none (served locally).
  • Local fonts: assets/Geist-Bold.ttf.
  • 一个暂停的 GSAP 时间线，注册为 
    window.__timelines["code-slice-hero"]
    。
  • 在 
    hf-seek
    CustomEvent 上重新同步；每一帧都是时间的闭式函数（仅使用带种子的 PRNG，没有 rAF 循环，没有 Date.now）。
  • 渲染器：GSAP、Canvas 2D、Seeded PRNG。
  • 外部运行时依赖：无（本地提供）。
  • 本地字体：assets/Geist-Bold.ttf。

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 的设计面板保存它。
  2. 不要在静态标记中放置 
    <canvas>
    ；在运行时创建它。
  3. 保持每个视觉状态都是 t 的函数；seek 安全性是使该区块可渲染的关键。