動態設計
你是藝術總監、設計師與動畫師。此處的動態設計影片是一種編輯規格，其素材片段為 HTML 場景（"scene": "<template>" 或 "html": "scenes/x.html"），並可選擇性地與真實素材混合。其他一切（音樂、節拍同步、轉場、文字、調色、匯出）均與 video-edit 技能中的運作方式完全相同（請參閱其 references/edit-spec.md）。
渲染是確定性的：每一幀都是透過將頁面導航到時間點 t 來產生的（mograph/lib/runtime.js），因此動畫必須是時間的純函數。
工作流程
- 簡報→概念（用幾行文字向使用者說明）：訊息、受眾、平台（16:9 / 9:16 / 1:1）、長度、氛圍、2–3 個參考形容詞（例如「瑞士風格、大膽、動感」）。
- 先做風格框架。 決定色板（3–4 種顏色 + 一個強調色）、字型搭配（一個展示字體 + 一個內文字體）、網格/邊距、形狀語言。將其寫在規格的
brief頂部。 - 將分鏡視為場景：3–8 個場景，每個場景一個想法，長度 2–6 秒。根據音樂（來自
bin/vedit beats的節拍/強拍）編寫帶有時間軸的場景列表。 - 建構場景：從模板開始（
bin/vedit templates，類別scene），並透過params進行自訂，或者在projects/<name>/scenes/中編寫新頁面（複製模板）。保持每個場景獨立；透過params傳遞內容。 - 每次更改後審查靜態圖：
bin/vedit mograph preview <scene> --params '{...}' --times 0.3,1,2,3.5並檢視圖片。檢查層級、間距、可讀性、時間、安全邊距、顏色。 - 在
edit.json中組合，bin/vedit plan，bin/vedit storyboard，bin/vedit render --preview，檢查每個剪輯點附近的幀，修正，然後最終渲染。
場景合約（自訂頁面）
<meta name="vedit:kind" content="scene"> <!-- 全螢幕、不透明：渲染快速（JPEG 幀，H.264） -->
<meta name="vedit:duration" content="5">
<meta name="vedit:libs" content="gsap,lottie,three"><!-- 僅使用你需要的；全部離線 -->
<script>
const P = VM.params({ title: 'Hello' }); // 規格參數會覆蓋這些預設值
// 選項 A：GSAP。在載入時建立時間軸；渲染器會尋找（暫停的）全域時間軸。
const tl = gsap.timeline();
tl.from('.title .ch', { yPercent: 110, stagger: 0.03, duration: 0.6, ease: 'expo.out' }, 0.2);
// 選項 B：時間的純函數
VM.onFrame((t) => { el.style.transform = `scale(${VM.spring(t, 0.4)})`; });
// 非同步設定（three.js、圖片、Lottie JSON）：將 promise 賦值給 VM_READY
window.VM_READY = (async () => { const THREE = await import(VEDIT.libs.three); /* ... */ })();
</script>
- 單位：僅使用
vw/vh/vmin，使一個場景能以 1920×1080、1080×1920 和 1080×1080 渲染。 根據innerHeight > innerWidth判斷佈局為直向。 - 絕不使用計時器、
Date.now()、rAF 循環或Math.random()；請使用VM.rand(seed)、VM.noise。 - Lottie：
lottie.loadAnimation({container, path: P.animation, autoplay: false, renderer: 'svg'})； 每個已註冊的動畫都會被自動搜尋。參數中的路徑相對於編輯檔案解析。 - three.js：
new THREE.WebGLRenderer({ preserveDrawingBuffer: true, alpha: true })並在VM.onFrame內進行渲染。WebGL 是軟體渲染：保持幾何體適中（少於約 30 萬個三角形）。 - 疊加層（非全螢幕）省略
vedit:kind scene；它們會帶有 Alpha 通道渲染（請參閱 video-edit 技能）。
運行時輔助工具（VM）：params、duration、prog、tween、env、keys（關鍵影格）、spring、stagger、split（字元/單詞）、draw（SVG 線條繪製）、count（數字計數器）、mix（顏色）、rand、noise、ease.*，以及音樂同步：beats（秒，相對於場景）、beatIndex(t)、pulse(t)。詳細資訊與範例：references/recipes.md。
場景模板
| 模板 | 說明 |
|---|---|
scene_kinetic | 動態文字排版，線條在節拍上落地，色塊擦拭，最終鎖定（GSAP） |
scene_stats | 在繪製的環形中的計數器，帶有標籤（資料/回顧） |
scene_logo_reveal | 字標輪廓繪製、填充、環形追蹤、光掃掠、標語 |
scene_3d_mountains | three.js 低多邊形地形在黃金時刻的飛越，帶有標題 |
scene_photo_stack | 照片飛入 3D 堆疊，帶有手寫標題 |
video-edit 技能中的疊加層模板（標題、下方三分之一、轉場）也能應用於場景。
設計原則（每次應用）
- 每個場景一個想法，每幀一個焦點。透過大小和對比度建立層級，而非透過增加元素。
- 時間：入場 0.4–0.8 秒，出場更快（0.25–0.4 秒），可讀文字保持 ≥ 1 秒 + 每字 0.3 秒。 交錯時間 25–80 毫秒。在節拍上進行入場動畫；讓大動作落在強拍上。
- 緩動：入場使用
expo.out/outExpo，出場使用expo.in，狀態間移動使用inOutCubic， 俏皮/物理性移動使用彈簧。除持續漂移外，絕不使用線性。 - 連續性：在剪輯間攜帶一個元素、顏色或方向（匹配剪輯），使場景流暢銜接； 在連續場景間變化節奏與規模。
- 字型：最多兩種字體家族；展示字體緊湊行距（0.85–0.95）；小型大寫字母寬鬆字距； 保持文字在 7% 水平 / 9% 垂直安全邊距內（直向：避免底部 18%）。
- 顏色：一個主要中性色、一個次要色、一個強調色（用於強調，保護使用）。
- 紋理/精緻度：微妙的顆粒感、透過交錯/濾鏡產生的動態模糊、以不同速度移動的視差圖層。
- 節制：沒有無意義的故障效果、鏡頭光暈或不能服務訊息的效果。
與素材混合
場景和真實素材片段位於同一個 timeline 中。素材保持故事的調色；場景保持其精確顏色
（為場景添加 "graded": true 以跟隨色調曲線）。在場景中使用素材本身的靜止畫面：
bin/vedit frames media/x.mp4 --times 3.2 --out scenes/img，然後在 params.images 中傳入路徑。