技能概述
Motion Frames 生成一個全屏 motion design 合成畫面。純 CSS @keyframes 動畫，零 JavaScript。呢個畫面本身就係一個 loop，可以當作 hero video poster，直接用 HyperFrames、Lottie 或其他幀捕獲器導出為視頻。
構圖包含：旋轉 concentric rings、wireframe globe focal mark、ring labels、display serif headline、frame chrome。至少 3 層以不同速度移動，深度來自速度差而唔係視差技巧。
觸發關鍵字
- motion design、motion graphic、animated hero
- loop animation、video poster、title card
- hyperframes、kinetic typography
- 動態設計、動效
什麼時候用
- 需要一個帶循環動畫嘅 hero 畫面
- 做 video poster / title card / 品牌展示
- 配合 HyperFrames 做 kinetic export
- 用戶要求 "motion design" 或 "animated hero"
使用方法
工作流程
-
讀 DESIGN.md — Motion design 生死取決於排版對比度。選擇 DS 中最有表現力嘅 serif / display token 做 headline，body / mono token 做標籤
-
搭建 16:9 hero 畫布，由後到前分層：
| 層 | 描述 |
|---|---|
| Stage | 全屏 <main>。off-white 或 DS-canvas 背景，subtle dotted grid（CSS radial-gradient dots，22-32px 間距） |
| Concentric rings | 2-3 個 SVG 圓圈，從焦點輻射。極細 stroke（0.5-1px），DS-foreground 低透明度。唔同速度旋轉（60s、90s、180s） |
| Focal mark | wireframe globe、stylized object 或 typographic monogram（inline SVG）。約 canvas 寬度嘅 28% |
| Ring labels | 短詞/音節 token 放喺圓環上（如 "Hola · Bonjour · 你好 · नमस्ते"）。同環一齊旋轉，<text> 路徑 counter-rotated 保持文字直立 |
| Headline | 左下或中下。Display serif，一個詞用 italic accent。subtle letterSpacing + opacity reveal 動畫（@keyframes type-in） |
| Frame chrome | 角標（左上 lab tag、右上 brand/issue number）+ 底部細 rule。靜態 |
- 動畫用
@keyframes— 零 JS：
| 動畫 | 用途 |
|---|---|
rotate-slow / rotate-med / rotate-fast |
圓環旋轉 |
globe-spin |
focal mark |
pulse |
focal dot，~2s，easing |
marquee-fade |
headline 載入時 reveal 一次 |
- 寫單一 HTML 文檔 — CSS inline，全部運動用 CSS，
data-od-id標記 stage、focal、ring、headline、chrome
自檢清單
- 畫面喺 motion paused at frame 0 時仍然讀得通（作為 poster）
- 至少 3 層以唔同速度移動
- Accent 只出現一次（通常係 headline 入面嘅 italic 詞）
輸出格式
<artifact identifier="motion-slug" type="text/html" title="Motion — Title">
<!doctype html>
<html>...</html>
</artifact>
Artifact 前一句描述，之後無內容。
設計要點
- 排版對比度係關鍵 — headline 用最醒目嘅 display serif，其他用 mono 做標籤
- 深度來自速度差 — 3 層唔同速度，唔係視差 trick
- Accent 克制 — 通常只有一個 italic 詞用 accent color
- 零 JS — 確保 HyperFrames 或任何 frame-grabber 可以 deterministic 捕獲