純程式碼動畫影片製作規範
畫面、動效、轉場、配樂、音效、排版、字體全部由程式碼產出,不用影片生成模型,也不用取樣或 AI 生成音樂。每個階段的產出先給需求方看,確認後再進入下一步。
推薦技術棧:Remotion(React)做畫面,Python + NumPy/SciPy 合成音訊,FFmpeg 合成成片。可換成 Motion Canvas、Revideo、Manim、HyperFrames 等,流程不變。
1. 明確需求
- 主角(產品、品牌、個人、活動)、受眾、片中可以和不可以在的名稱或元素。沒說清就按「對任何觀眾說話」來寫。
- 時長(常見 15–60 秒)、畫幅(橫版 1920×1080、豎版 1080×1920 或方形)、幀率(正式版建議 60fps)、發布渠道。
- 閱讀主角的官方資料(官網、發布文章、文件),摘錄原話:它如何描述自己、核心賣點、說話口吻。片中事實只能來自這些資料。
2. 調研開源參考
每條參考都要實際核實存在,記錄地址、許可證和參考價值,查不到的不列。常見類別:
- 影片框架及其範例倉庫:Remotion、Motion Canvas、Revideo、Manim、HyperFrames、theatre.js、GSAP、Lottie。
- 設計系統和配色:Radix Colors、Open Color、Tailwind、Catppuccin、IBM Carbon、Primer、Geist、awesome-design-systems。
- 漸變和著色器背景:shadergradient、whatamesh、three.js。
- 動效:Motion、react-spring、anime.js、awesome-creative-coding。
- 音訊:Tone.js、jsfxr、ZzFX、tonal。
- 字體:只用允許商用的許可(如 SIL OFL)。中文常用思源黑體 / Noto Sans SC、思源宋體、得意黑(僅斜體,適合標題)、霞鶩文楷;西文常用 Inter、Space Grotesk、Unbounded、JetBrains Mono。
- 圖標:Lucide、Tabler、Phosphor。
- 文案風格:chinese-copywriting-guidelines、Humanizer-zh、humanizer、stop-slop。
- 指定使用的 Logo 或素材:找到原始檔案,確認許可證以及是否為註冊商標。沒有授權的商標圖形只用於內部預覽,公開發布前要先取得授權。
3. 寫方案(先不渲染)
- 主題句和整體調性。
- 統一的時間軸:定一個 BPM(如 120 BPM,每小節 2 秒),每個剪切點落於小節線或拍點上。時間一律用正式版幀率的幀號記錄,寫進
timeline.json,畫面和音訊共用這份資料。 - 分鏡表:每個場景的時間碼和幀區間、螢幕文案、畫面、動效(緩動曲線或彈簧參數)、聲音。
- 轉場表:每個切換單獨設計,含開場和結尾。寫清技法(遮罩擦除、形變、匹配剪輯、鏡頭推進穿越、共享元素放大、色塊擦除、翻面等)、幀區間、緩動、帶到下一鏡的元素、配合音效和落拍。
- 視覺系統:色板(hex)、網格和邊距、字體搭配(字號、字重)、背景處理。
- 配樂:調性、和弦進行、段落結構、各樂器的合成方法、與剪切點的對應。
- 音效清單:每個場景用哪些音效、如何合成。
- 用 HTML 加無頭瀏覽器截 4 張左右靜態風格幀,再加 1–2 張轉場分解圖(中間狀態拼成一條)。
4. 視覺方向備選
風格未定或需求方有異議時,出 3–4 套差異明顯的方向(如亮色雜誌、暖色漸變加毛玻璃、多彩波普貼紙、瑞士網格、暗色科技)。每套給色板、背景、字體和靈感來源,各截一張同一場景的風格幀,再拼一張對比圖供選擇。分鏡和轉場保持不變,只換視覺。
5. 製作
- 畫面:字體用本地檔案,載入完成後再渲染。所有動畫由幀號驅動;靠瀏覽器即時運行的 SVG、CSS、JS 動畫要改寫成按幀計算,否則渲染結果不確定。
- 動效:活潑風格用帶過衝的彈簧加擠壓拉伸,克制風格用平滑緩動。彈簧回彈可能讓縮放值為負,需要截斷。
- 音訊:自寫合成器,如失諧鋸齒波鋪底、FM 鐘琴、Karplus-Strong 撥弦、下滑正弦底鼓、濾波噪聲做鈸和拍手、側鏈壓縮、混響。音效用噪聲、掃頻、共振合成。可設計一段 2–3 個音的品牌音,用在落版和結尾。
- 寫 WAV 時確認位深和歸一化正確,否則音量可能差幾十 dB。用 FFmpeg 把響度統一到目標值(網路平台常用 -14 LUFS),峰值留餘量。
- 合成:H.264 加 AAC,開 faststart。
- 記憶體緊張時降低渲染並行數。
6. 預覽
- 先渲染低解析度完整預覽(如 960×540、30fps),帶最終混音,用於確認節奏。
- 自檢:ffprobe 核對時長、幀數和音軌;按固定間隔抽幀拼成接觸表,檢查元素重疊、缺字、豆腐塊;搜尋原始碼,確認不該出現的內容沒有出現。
- 交付預覽時說明已知風險,例如節奏可能過快的轉場、只做過數值檢查未經人耳試聽的聲音。
7. 文案去 AI 腔
- 去掉「不是…而是…」、三連排比、空洞口號、宣傳腔、抽象名詞堆疊。
- 寫具體場景和具體數字,用口語節奏,一句只說一件事,長度卡得進拍子。
- 中英文之間、中文與數字之間加空格。
- 提供逐場景的修改前後對照表。
8. 正式版
- 內容與確認過的預覽一致,只提高規格:如 1920×1080、60fps、CRF 16–18、yuv420p、AAC 320k。
- ffprobe 核對規格,從成片截關鍵幀檢查清晰度,重點複查修過的問題。
- 檔案過大時另出一份壓縮的分享版。
- 需要的話,用同一份時間軸重新排版導出豎版或其他畫幅。
檔案結構
project/
plan_v*.md 方案(每版新存一份)
frames*/ 風格幀和 HTML 原始檔
fonts/ assets/
timeline.json 畫面與音訊共用的時間軸
video/ 影片工程
audio/compose.py 音訊合成腳本
out/ 預覽、正式版、截圖