Remotion + HyperFrames新手完整上手指南，附20條可直接用的動效提示詞

1. 參數化文字/數字動畫（Parametric Typography）
用 Remotion 建立一個參數化證書動畫模板，props 包含：name（姓名）、score（分數）、date（日期）、rank（排名），背景深色，中心金色邊框證書卡片，姓名大字白色居中，分數用數字跳動動畫從0到目標值，日期和排名小字依次漸入，整體時長5秒，16:9，用 Zod 校驗 props 類型，確保參數安全傳入。

2. 精確幀插值動畫（Frame Interpolation）
用 Remotion 建立一個精確幀插值動畫，使用 useCurrentFrame() 獲取當前幀，0-30幀：標題從 opacity 0 + scale 0.8 插值到 opacity 1 + scale 1，使用 spring()，30-60幀：副標題從 translateY 30px 插值到 0，opacity 同步漸入，60-90幀：底部裝飾線條寬度從 0% 插值到 100%，所有動畫用 interpolate() 精確定義關鍵幀，背景深色，文字白色，時長3秒90幀，30fps。

3. 數據驅動圖表生長（Data-Driven Charts）
用 Remotion 建立一個數據驅動圖表動畫，數據數組：[{ label: 'Q1', value: 120 }, { label: 'Q2', value: 185 }, { label: 'Q3', value: 210 }, { label: 'Q4', value: 280 }]，柱狀圖每根柱子高度用 interpolate(frame, [startFrame, endFrame], [0, targetValue]) 計算，每根柱子延遲15幀依次生長，頂部數字用 Math.round(interpolate()) 同步跳動，深色背景，品牌藍柱子，白色標籤，時長5秒。

4. Sequence 多層時間軸編排
用 Remotion 的 <Sequence> 組件建立一個三段式完整視頻，<Sequence from={0} durationInFrames={90}>：片頭動畫，Logo+品牌名漸入；<Sequence from={90} durationInFrames={300}>：正片內容，3張信息卡依次出現；<Sequence from={390} durationInFrames={60}>：片尾，網址+關注提示漸入；總時長450幀15秒，30fps，各段之間有0.5秒溶解過渡，背景深色統一。

5. 動態時長計算（calculateMetadata）
用 Remotion 建立一個動態時長視頻，用 calculateMetadata 根據傳入的 items 數組長度自動計算總幀數，每條 item 對應150幀（5秒），items 示例：['功能一介紹', '功能二介紹', '功能三介紹']，每條 item 內容依次在對應時間段內顯示，背景深色，文字白色，字號40px，居中顯示。

6. 真實音畫嵌入與剪輯（Media Composition）
用 Remotion 建立一個包含真實素材的合成視頻，<Video src="./public/broll.mp4" startFrom={30} endAt={120} volume={0.3}/>，視頻鋪滿背景，<Audio src="./public/voiceover.mp3" startFrom={0} volume={1}/>，旁白音頻從第0幀開始，前景疊加動態字幕，字幕按幀號逐句顯示，字幕白色底部居中帶半透明黑色背景條，整體時長跟隨音頻長度，30fps。

7. 服務端/Lambda 雲渲染（SSR & Batch Render）
用 Remotion 建立一個適合批量渲染的模板，inputProps 接收：userId、userName、score、date 四個參數，視頻內容：用戶專屬成績單動畫，姓名高亮，分數跳動，日期漸入，用 Zod 嚴格校驗所有 inputProps，模板設計上避免外部網絡請求，所有素材本地引用，時長固定5秒，適合 Lambda 併發渲染。

8. 組件化模板複用（React Component Reuse）
用 Remotion 建立3個可複用組件，TitleCard 組件：接收 title、subtitle、bgColor 三個 prop，標題漸入動畫；LowerThird 組件：接收 name、role 兩個 prop，從左側滑入的字幕條；OutroCard 組件：接收 website、cta 兩個 prop，片尾關注引導卡片；每個組件動畫時長由 prop 控制，在主合成中用 <Sequence> 依次調用這三個組件，展示組件化拼接完整視頻的工作方式。

9. Zod Schema 參數校驗（Typed Props）
用 Remotion+Zod 建立一個類型安全的視頻模板，用 z.object() 定義 schema，title: z.string().max(20)，subtitle: z.string().optional()，brandColor: z.string().regex(/^#[0-9a-f]{6}$/i)，logoUrl: z.string().url().optional()，durationSecs: z.number().min(3).max(30)，視頻內容根據 brandColor 動態改變主色調，logoUrl 有值時展示 Logo，無值時顯示佔位圖，durationSecs 傳入後通過 calculateMetadata 換算成幀數。

10. 字幕/TTS/旁白同步（Captions & Voiceover）
用 Remotion 和 @remotion/captions 建立一個字幕同步視頻，音頻文件：./public/voiceover.mp3，字幕數據數組包含每個詞的 startMs、endMs、text，示例詞組：[{text:'這是', startMs:0, endMs:400}, {text:'一個', startMs:400, endMs:800}, ...]，當前播放詞用 useCurrentFrame() 對比時間戳判斷，高亮為品牌黃色，其餘白色，字幕顯示在畫面底部三分之一，字號36px，背景深色，同步播放音頻，時長跟隨音頻，30fps。

1. 3D 透視傾斜 / Isometric 卡片
/hyperframes 建立一個10秒16:9視頻，深色背景 #0f0f1a，中心展示一張產品截圖卡片，卡片初始狀態 perspective:1200px + rotateY(25deg) + rotateX(10deg)，帶白色邊框和藍紫色輝光陰影，用 GSAP 讓卡片從傾斜狀態緩慢回正，回正同時陰影從深變淺，整體有從空間裏飛出來嘅感覺，背景有輕微網格紋理。

2. 多層視差（Parallax）
/hyperframes 製作15秒16:9視頻，三層結構，背景層係深色星空紋理以0.3x速度向右移動，中間層係主標題「數字生命」以1x速度向右移動，前景層係幾個半透明幾何圖形以1.8x速度向右移動，營造鏡頭推進嘅縱深感，GSAP控制三層時間軸，開頭2秒靜止，之後開始運動，結尾主標題漸出。

3. Ken Burns + 呼吸縮放
/hyperframes 製作20秒16:9視頻，背景係一張全屏風景圖片，用 GSAP 讓圖片從 scale(1.0) 緩慢到 scale(1.15)，同時 x 從 0px 移動到 -30px，整個過程20秒勻速，沒有明顯停頓，前景有文字「故事，從這裏開始」白色大字中心漸入，5秒後漸出，整體有膠片紀錄片質感。

4. 錯開入場（Staggered Entrances）
/hyperframes 製作12秒16:9視頻，深色背景，展示5個功能卡片，每張卡片初始 opacity:0 + translateY(40px) + scale(0.9)，用 GSAP stagger 依次間隔0.3秒入場，每張入場時用 ease: back.out(1.7) 彈性效果，入場後卡片有輕微呼吸浮動（translateY ±5px 循環），品牌藍卡片背景 + 白色文字，整潔留白風格。

5. 蒙版 / 裁剪路徑揭示（Mask & Clip-path）
/hyperframes 製作8秒16:9視頻，背景深色，主標題文字「2026年中期盤點」被一個圓形 clip-path 遮住，圓形從中心向外擴展，從 circle(0%) 到 circle(150%)，GSAP 控制擴展過程2秒，ease: power2.out，文字揭示完成後，底部數據依次滑入，整體有揭幕嘅儀式感。

6. 動能文字 + 路徑動畫
/hyperframes 製作10秒16:9視頻，深色背景，中心有一句話「你的視頻，值得被好好包裝」，用打字機效果逐字出現，每個字間隔0.08秒，光標在末尾閃爍2次，文字完全出現後，整行文字下方有一條白色描邊線從左到右繪製，GSAP控制描邊動畫，時長1秒，最後整體輕微放大後漸出。

7. 光效 / 輝光 / 陰影掃過
/hyperframes 製作8秒16:9視頻，深色背景#050510，中心一個品牌Logo文字「BRAND」，背後有一道白色光暈從左下到右上掃過，GSAP控制光暈從x:-200px到x:400px，時長1.5秒，logo文字同時有藍紫漸變輝光（text-shadow）從無到有再到無，循環2次，整體有科幻感，背景有微弱粒子漂浮。

8. 數據可視化生長
/hyperframes 製作15秒16:9視頻，深色背景，展示3組數據，第1組：圓形進度條從0%到87%，中心顯示數字跳動，GSAP控制3秒；第2組：3根柱狀圖從底部生長，依次延遲0.5秒，配色品牌藍，數值顯示在頂部；第3組：折線圖從左到右繪製，時長2秒；三組數據依次出現，每組之間間隔2秒，背景有淡色網格線，整體清晰專業。

9. 3D 旋轉 / 翻轉 / Idle 擺動
/hyperframes 製作12秒16:9視頻，深色背景，中心展示一張產品卡片，正反兩面，正面：產品名 + 功能概述，深色背景，背面：核心數據 + 品牌色背景，GSAP控制 rotateY 從0到180deg，時長1.5秒，停留3秒，再翻回來，卡片有 perspective:800px，翻轉時有實時陰影變化，等待過程中卡片有輕微 translateY ±8px 循環呼吸擺動，感覺像漂浮喺空中。

10. 場景轉場 + 自定義 Easing
/hyperframes 製作20秒16:9視頻，包含3個場景，場景1→場景2：從右側推入（translateX 從 100vw 到 0），ease: power3.inOut，時長0.8秒；場景2→場景3：溶解效果（場景2 opacity 1→0，場景3 opacity 0→1 疊加），時長1.2秒；場景1：深色背景 + 標題文字，場景2：數據展示（柱狀圖），場景3：結尾 CTA 文字 + Logo，每個場景內容停留5秒，轉場乾淨利落，整體節奏有電影正片嘅質感。