szeproka/hyperframes-registry

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
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 CustomEvent 發生時重新同步；每個影格是時間的閉合形式函數（僅使用種子亂數生成器，無 rAF 迴圈，無 Date.now）。
• 渲染器：GSAP、Canvas 2D、種子亂數生成器。
• 外部執行時期依賴：無（在地提供）。
• 在地字型：assets/Geist-Bold.ttf。

編輯規則（來自原始專案）

1. 保持 data-composition-variables 為單引號屬性，內含純 " JSON。切勿透過 Studio 的設計面板儲存。
2. 不要在靜態標記中放置 <canvas>；應在執行時期建立。
3. 保持每個視覺狀態為 t 的函數；尋跡安全性是讓區塊可渲染的關鍵。