Motion
先閱讀 /hyperframes 技能（渲染合約），再閱讀 brand/DESIGN.md。生產目錄是 templates/base/ 的複本。
基礎
templates/base/index.html已包含：顏色變數、字型、3D 介面平面（#world）、玻璃卡片樣式、遮罩與粒子。請保留這些類別，不要重新發明樣式。- 當影片超過 10 秒時，在
compositions/中每個子合成一個場景（根目錄僅保留場景容器、音訊及背景世界）。 - GSAP 為本地依賴（
assets/js/gsap.min.js）。絕不使用 CDN：渲染過程無網路。 - 字型：透過
@font-face指向assets/fonts/。
動作（工作室數值）
| 動作 | 數值 |
|---|---|
| 文字進入 | 從遮罩後方：yPercent 110 → 0，0.7 至 0.85 秒，expo.out，每行間隔 80 毫秒 |
| 文字離開 | yPercent 0 → -110，0.36 至 0.4 秒，power3.in |
| 玻璃卡片進入 | y +1250 → 0，1.1 秒，expo.out |
| 粒子 | y 26 → 0 + 透明度，0.6 秒，expo.out，每粒子間隔 70 毫秒 |
| 線條 | scaleX 0 → 1 從左側開始，0.7 至 0.8 秒，expo.out |
| 介面平面 | 線性連續滾動，rotationX 56，rotationZ -20 |
| 玻璃反光 | 每部電影一次，1.3 秒，power2.inOut |
| 數字計數 | 0.9 至 1.4 秒，power3.out，最終數值四捨五入並保持 |
技術禁止：動畫 letter-spacing、width、top、left；對 GSAP 已動畫的元素使用 CSS transform；標題使用 filter: blur；任何光暈或背景漸層（請參閱 DESIGN.md）。
真實介面
要展示應用程式，請使用真實截圖（對於公開網站如 mescentimes.cloud，執行 npx hyperframes capture <url> --json），或使用真實的 FCFA 貨幣數據以 HTML 重建畫面。絕不使用虛假的客戶標誌。
檢查後再渲染
npx hyperframes check --json # 零錯誤
npx hyperframes snapshot --at <關鍵時間點> # 檢查每個影格
npx hyperframes render --output renders/<slug>.mp4
渲染後：在手機上使用 ffmpeg -ss T -i … -vf scale=540:-2 擷取 6 張影像，並在交付前檢查它們。