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 | string | "MAKE IT" | 文字 · 前方標題最多 32 個字元 |
reverseHeadline | string | "MATTER." | 文字 · 後方標題最多 32 個字元 |
direction | enum | "left-to-right" | 動畫 · 掃掠方向（left-to-right |
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 |
執行時期合約
- 一個暫停的 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 的函數；可尋址安全性是讓區塊可渲染的關鍵。