動畫風格
一個包含 39 種手工打造動畫風格的 Remotion 專案。每種風格都會重新繪製一個固定的故事，因此可以並排比較並作為模板重複使用：一個水壺進來、傾斜、將奶茶倒入一個 kulhad（陶杯）中、杯子裝滿、水壺離開、蒸汽升起。 150 幀、30 fps、1080×1350 (4:5)、無聲。以 --scale=2 渲染時為 2160×2700。
所有內容皆以程式碼繪製：使用 SVG 搭配篩選器，或逐幀繪製的 <canvas>。不涉及任何影像模型、影片模型或素材片段，因此輸出內容原創且可重現。
專案位於此技能的文件夾（即存放此檔案的文件夾，以下簡稱 <skill>）。請在該資料夾中執行命令。
0. 初次使用
cd <skill>並檢查node_modules/是否存在。如果不存在，請執行npm install（約需一分鐘，需要 Node 18+）。npm run list會列出所有 39 種風格，包含其編號、代號以及一行簡介。- 首次渲染會下載一次無頭 Chrome（約 100 MB），需要網路連線。
常見請求：「製作一個 5 秒的 <想法> 並採用 <風格> 風格」
這是主要任務（也是引導使用者前來的提示）。請一氣呵成完成，除非想法不明確，否則不要中途提問：
- 工作資料夾： 在使用者目前的工作資料夾內使用
animation-films/。如果該資料夾不存在，請從目前資料夾執行node <skill>/scripts/new-project.mjs animation-films來建立，然後cd animation-films && npm install（第一次之後會很快）。如果已存在（後續操作），則直接重複使用。 - 選擇風格 從請求中選取（第 1 節）。如果沒有指定風格名稱？建議三種適合該想法的風格並詢問。
- 規劃故事 用一個簡短的表格，根據六個節拍（第 3 節）來規劃。在一個訊息中顯示並繼續；除非有不明確之處，否則無需等待。
- 先繪製形狀： 將使用者的物件（主角、容器、流動物、上升物）放入
src/films/<idea>-shapes.ts中，作為 SVG 路徑，座標系統與story.ts中的P相同，並在頂端以註解方式加入節拍表格。這個想法的每種風格版本都會從此檔案匯入。 - 建構
src/films/<idea>-<style>.tsx，使用該風格的元件（第 3 節），引用形狀檔案，並在src/films/index.ts中以 id<idea>-<style>註冊。 - 檢查： 執行
npm run render -- <idea>-<style> --frames並查看所有六個幀（第 5 節）。修正並重複。 - 交付： 執行
npm run render -- <idea>-<style> --final並提供使用者out/<idea>-<style>.mp4的完整路徑。告知他們可以要求另一種風格（「現在改用像素藝術」）。
重新風格化後續操作（「現在改用像素藝術」、「試試水彩風格」、「用木刻做同一個」）： 停留在同一個 animation-films/ 資料夾中，保留相同想法、節拍表和形狀檔案，並從新風格的元件建構新的 src/films/<idea>-<new-style>.tsx。與先前的版本一起註冊（切勿覆蓋），檢查幀、渲染最終版本並提供新路徑。如果使用者模糊地命名風格（「8-bit」、「老電影」、「粉筆」），請對應第 1 節。3D 外觀風格（57、58、59、62、80）將物件建構為 3D 網格，因此在那裡替換新物件需要更多工作：使用 src/styles/3d/mesh.ts 中的輔助工具將形狀轉換為簡單的車削或盒狀網格。
1. 選擇風格
如果使用者尚未指定，請詢問他們想要的風格。如果他們不確定，請按系列顯示 npm run list 以及 README.md 中的圖庫（每種風格在 media/thumbs/ 中都有動態預覽，在 media/videos/ 中則有 720×900 的 MP4）。寬鬆比對：「日本版畫」→ 33 浮世繪、「粉筆」→ 02 黑板、「8-bit」或「復古遊戲」→ 64 像素藝術 RPG、「黏土」→ 62 黏土動畫、「樂高風格」→ 58 積木玩具（切勿在螢幕上稱之為樂高）、「老電影」→ 70 默片或 71 新聞影片、「科幻螢幕」→ 84 全像 HUD。
| 系列 | 風格 (編號、代號) |
|---|---|
| 板上繪製 | 01 白板 · 02 黑板 · 05 記事本塗鴉 · 06 藍圖 |
| 手繪與水彩 | 08 手繪 · 09 城市速寫 · 10 蠟筆書本 · 11 水彩 · 13 一筆畫 · 16 賽璐珞線條抖動 |
| 卡通 | 17 扁平向量 · 21 80年代賽璐珞動畫 · 22 火柴人 |
| 紙張與玩偶 | 23 剪紙 · 24 紅色剪紙 · 25 立體紙雕 · 27 皮影戲 |
| 版畫與工藝 | 28 木刻 · 29 版畫 · 31 絹印海報 · 33 浮世繪 · 34 裝飾藝術 · 35 彩繪玻璃 |
| 圖形與解說 | 39 孟菲斯立體模型 · 51 貼紙解說 · 52 數學圖表 |
| 3D 外觀 | 57 低多邊形島嶼 · 58 積木玩具 · 59 玻璃製品 · 62 黏土動畫 · 80 雷射雷達測量 |
| 電影時代 | 70 默片 · 71 新聞影片 |
| 螢幕與科學 | 64 像素藝術 RPG · 81 顯微鏡 · 84 全像 HUD · 85 電路板 |
| 抽象 | 87 液體動畫 · 89 生成式抽象 |
src/catalog.ts 是單一列表：編號、組合 id (33-ukiyo-e)、名稱、系列、外觀、風格顯示的螢幕文字，以及其程式碼所在檔案。
2. 直接展示內建風格
npm run render -- 33 # 720x900 預覽 -> out/33-ukiyo-e_preview.mp4 (數秒至一分鐘)
npm run render -- 33 --final # 2160x2700 主檔 -> out/33-ukiyo-e.mp4 (crf 16)
npm run render -- 33 --frames # 6 個檢查幀 -> out/33-ukiyo-e_frames/ (+ 如果已安裝 ffmpeg，則會產生聯絡表)
npm run render -- 33 --still 75 # 第 75 幀的一張 PNG
風格可以透過編號、id、代號或名稱的一部分來指定（ukiyo、pixel、stained）。現成的 720×900 影片已位於 media/videos/ 中，完整的 2160×2700 主檔則在 GitHub 發布頁面上，因此僅需展示一種風格時，完全不需要渲染。
3. 用使用者的故事或物件重新演繹
故事已在 src/story.ts 中固定。保留其時間點，並更改繪製的內容。這就是讓新影片第一次就能正確輸出的關鍵：每種風格都已經知道如何呈現這些節拍。
節拍 (30 fps 的幀，對於 5 秒的影片絕不移動它們):
| 幀 | 節拍 | storyAt(f) 的值 |
|---|---|---|
| 0–24 | 主角從右側進入 | kx, ky |
| 24–42 | 主角準備好（傾斜） | tilt (0 → −38°) |
| 42–96 | 主要動作（倒出） | streaming, stream (從 tip 進入杯中的 SVG 路徑) |
| 44–100 | 結果成長（杯子裝滿） | level 0 → 1, surface (奶茶橢圓) |
| 96–126 | 完成並離開 | tilt 回到 0, kx 滑出 |
| 104–150 | 後續效果（蒸汽升起） | steam[0..2] 0 → 1, 使用 steamPath(i, p, t0) 繪製 |
story.ts 中的 P 儲存了杯子 (kulhadBody, kulhadOutline, rim) 和水壺 (kettleBody, kettleLid, kettleSpout, kettleHandle, kettleBand, 加上 KNOB) 的 SVG 路徑。水壺以其自身原點繪製，並使用 translate(kx, ky) rotate(tilt) 放置。
首先將使用者的故事映射到相同的六個節拍，以一個簡短表格呈現給他們。範例：
| 使用者的想法 | 主角（水壺） | 動作（倒出） | 結果（裝滿） | 後續效果（蒸汽） |
|---|---|---|---|---|
| 咖啡倒入馬克杯 | 咖啡壺 | 咖啡流 | 馬克杯裝滿 | 蒸汽 |
| 給植物澆水 | 澆水壺 | 水滴 | 土壤變暗，隨著 level 長出新芽 | 兩片葉子展開 |
| 存錢 | 拿著硬幣的手 | 硬幣掉落 | 小豬撲滿裝滿 (level → 硬幣堆疊) | 閃光 |
| 顏料倒入罐中 | 顏料罐 | 濃稠顏料 | 罐子裝滿 | 一滴顏料沉降 |
| 資料上傳（抽象或資訊風格） | 一朵雲 | 資料包沿著 stream 移動 | 條形圖或儀表隨著 level 裝滿 | 刻度標記升起 |
然後建構它：
- 在單獨的專案中工作，以保持已安裝的技能乾淨：預設情況下，在使用者目前資料夾中的
animation-films/內（參見上方「常見請求」），使用node <skill>/scripts/new-project.mjs <folder>建立，然後在該資料夾內執行npm install。切勿在使用者的影片專案中建構<skill>本身。 - 從其檔案（參見
src/catalog.ts）複製所選風格的元件到src/films/<film-name>.tsx，以及它匯入的輔助工具。切勿就地編輯那 39 個原始檔案：它們是參考基準。 - 替換形狀，而非時間點：將水壺和杯子的路徑替換為使用者的物件（保持大約相同的大小和位置：杯子居中於 x 540，杯緣於 y ≈ 800；主角靜止時約為 (796, 324)，其「壺嘴」位於局部點 (−251, −62)），重新著色液體，更改上升的物體。保留風格自身的材質、調色盤邏輯、篩選器、紋理和動態特性（手工媒介為兩格或三格步進，數位為平滑，電影為閃爍）。
- 如果風格會顯示文字（目錄的
text欄位列出：51、52、64、70、71、84 和 85 會顯示文字），請為新故事改寫：簡短、純英文、僅關於該故事。 - 在
src/films/index.ts中註冊該影片並渲染（第 4 節）。
更長或不同的故事（更多節拍、兩個主角、鏡頭移動）：在 story.ts 旁邊撰寫一個新的故事檔案（例如 src/films/my-story.ts），其中包含自己的 storyAt(f)，該函數回傳繪圖所需的所有值，在頂端以表格列出新節拍，在影片上設定 durationInFrames，並遵守規則「故事檔案掌管所有時間點，風格檔案掌管所有外觀」。僅在風格旨在呈現手工製作外觀時，才對幀進行量化（Math.floor(f / 2) * 2）。
程式碼規則：僅使用確定性函數（無 Math.random()、無 Date；使用幀或索引的種子函數）、唯一的 filter 和 clipPath id、僅透過 @remotion/google-fonts/<Font> 使用字型並在模組層級使用 loadFont()，以及不安裝 package.json 之外的任何東西。
4. 渲染
| 需求 | 命令 |
|---|---|
| 快速查看 | npm run render -- <film-or-style> (720×900, crf 23) |
| 最終輸出 | npm run render -- <film-or-style> --final (2160×2700, crf 16) |
來自 src/films 的影片 | npm run render -- <film-id> --final (同樣支援 --frames、--still 75) |
| 即時編輯 | npm run studio 在瀏覽器中開啟 Remotion Studio |
3D 外觀風格（57、58、59、62、80）以 1080 寬度的 1.5 倍（80 為 1.25 倍）在 Canvas 上繪製軟體渲染場景，然後拉伸至 2160，因此它們比其它風格稍微柔和且較慢。若要獲得清晰的輸出，請提高 src/catalog.ts 中 glView(...) 的第二個引數（2 = 原生 4K，速度約慢兩倍）。
5. 交付前檢查輸出
執行 npm run render -- <id> --frames 並查看每個幀（讀取 PNG）。然後修正並重新渲染。允許兩到三次迭代。
- 可讀的故事： 在第 50 幀時，明顯有東西在倒出；在第 75 幀時，容器明顯在裝滿；在第 149 幀時，後續效果清晰可見。
- 無剪裁： 內容未超出幀邊緣；主角完全進入並完全離開。
- 分層： 液體保持在容器內部，流進入容器（而非在近側邊緣前方），蒸汽從表面開始。
- 風格可識別： 從單一幀就能判斷風格。兩種風格絕不應看起來像是彼此的重新著色。
- 對比度： 液體和流在背景下清晰可見，無模糊。
- 動態特性： 手工媒介為步進式，數位為平滑；沒有非預期的閃爍。
- 文字： 僅有預期的文字，拼寫正確，且在幀內。
- 內容規則（下方）全部通過。 最後從頭到尾觀看一次預覽 MP4，然後渲染最終版本。
6. 內容規則（始終遵守）
- 無真實品牌、標誌、產品、人物、頻道名稱或電視網路，螢幕上無商標名稱。「積木玩具」是通用的玩具積木，絕非指名品牌。
- 無真實地圖、地點或國界，以及無旗幟或政治符號/口號。如有風景，則為虛構且無可辨識的地理特徵。
- 無複製特定的電影、節目、片頭序列、遊戲、角色或已知角色的輪廓/精靈圖。 風格或類型可以，特定的現有作品不行。
- 無虛構事實： 無偽造的統計數據、價格、日期、引言或來源。資料風格僅繪製故事自身的值（如填充水平），別無其他。
- 僅在風格為字體排印、廣播或遊戲 UI 時才顯示文字，且文字為關於故事本身的簡短英文。
- 保持原創：使用者的故事、您自己的繪圖、作為一種技術的風格。
檔案
| 路徑 | 說明 |
|---|---|
src/story.ts | 故事：大小、時間點、節拍、物件路徑、storyAt(f) 和 steamPath() |
src/kit.tsx | 共用輔助工具：Stage (SVG 舞台)、Paper (紙張紋理)、Rough (抖動位移)、region |
src/catalog.ts | 39 種風格：編號、id、名稱、系列、外觀、螢幕文字、檔案、元件 |
src/styles/<family>/ | 繪圖程式碼，按技術分組 |
src/films/ | 使用者自己的影片 |
src/Root.tsx、src/index.ts | 將每種風格和影片註冊為 Remotion 組合 |
scripts/render.mjs | npm run list / npm run render |
scripts/new-project.mjs | npm run new -- <folder> 將程式碼複製到新專案 |
media/videos/、media/thumbs/ | 每種風格的 720×900 MP4 和動態 WebP |