Pixel 短影片（Remotion + three.js + 像素精靈）
流暢的 3D 世界，像素風格人物。所有內容（人物、建築、紋理、音樂、音效）皆由程式繪製或合成，因此成果為原創，無需素材或授權。此範本為完整且可運作的起始專案；本檔案即為您所需的一切。
開始
建立新專案（複製 template/、安裝相依套件、生成音樂與音效、型別檢查）：
~/.claude/skills/pixel-film/bin/new-film.sh <資料夾>
cd <資料夾> && npm run studio # 合成項目：Film（36 秒起始影片）和 CharSheet（每個人物與姿勢）
若要在現有 Remotion 專案中安裝：請複製 template/src/film/、template/src/components/ui.tsx、template/src/theme.ts、template/scripts/ 和 template/public/fonts/，並從 template/package.json 新增相依套件（three、@remotion/three、@react-three/fiber、@types/three、@remotion/bundler、@remotion/renderer；所有 Remotion 套件需為同一個版本）。
在開始建構之前，先確認以下事項
僅詢問會影響工作的問題；否則請自行選擇並說明您的選擇。
- 格式。 16:9（1920×1080）適合街道場景、跟拍鏡頭、YouTube 以及 Facebook 動態消息。9:16（1080×1920）適合 Reels/TikTok/Shorts，但畫面較窄（水平視野約減少一半），因此需重新考慮廣角鏡頭和過肩鏡頭。若不確定請提問：這會影響每一個鏡頭。
- 故事與長度。 以場景表格撰寫，時間軸以 2 秒為單位（30 fps 下為 60 影格）：發生什麼事、誰說了什麼、一天中的時間、攝影機。45–80 秒適合廣告或短影片。
- 語言。 標題卡與字幕應使用觀眾的語言。
- 要展示的重點（針對產品或應用程式）：一個清晰的特色時刻，放置在音樂的重拍上，使用真實產品（請參閱「展示真實應用程式」）。
建構區塊（template/src）
| 檔案 | 說明 | 自訂方式 |
|---|---|---|
film/people.ts | 像素人物，64×112，使用 Canvas 繪製形狀後轉換為像素藝術（顏色對齊色盤、背光側進行 cel 著色、部位之間以深色線條分隔、外框）。視角：正面、側面（走路循環 walk0–3）、背面。姿勢：idle blink talk happy wave think worried phone pay、sideIdle sideTalk、back backPhone、sitPhone sitHappy。範例角色：owner kid uncle woman grandma man。 | PEOPLE：膚色、頭髮與 hairStyle（髮髻、短髮、馬尾、禿頭、帽子）、上衣/褲子/鞋子顏色、topDots、dress、apron、sleeveless、glasses、mustache、belly、kid、iris。在 CharSheet 中確認。新的服裝、道具或頭髮需在 drawPerson、face、hairFront 中新增。 |
film/Street3D.tsx | 場景。中央有一間商店：內部（貨架商品、櫃檯、燈泡、冰櫃、凳子）、正面（櫃檯上方寬敞開口、可選鐵絲網與塑膠門簾、招牌、櫃檯板、遮陽棚）。鄰居（玻璃櫥窗商店、附條紋遮陽棚的鐵捲門商店、房屋）、二樓帶陽台與百葉窗（夜間亮燈）、人行道、馬路、帶路燈的電線桿（可選下垂電線）、樹木、植物、桌椅。time 決定光線（0 早晨、1 中午、2 黃金時段、3 黃昏、4 夜晚；分數值可混合），附帶陰影、天空、星星、霧氣與燈光光暈。人物是會投射陰影的發光看板。可選 items（櫃檯上的商品）、cat、fx.beam / fx.scanX（掃描櫃檯的手機）。 | SET 最上方：招牌文字與顏色、牆壁顏色、櫃檯板、鐵絲網、塑膠門簾、商品 (public/products/<名稱>.png)、鄰居名稱與顏色、樓層、電線。座標：商店正面在 z = 1.2（開口 x −2..2，y 1..2.3，櫃檯頂部 y = 1.0），櫃檯後方人物在 [0, 0, 0.25]，前方顧客在 [0.7, 0.12, 1.95]；人行道頂部 y = 0.12（z 1.2 到 3.6），之後為馬路；建築物沿 x 軸從 −19 到 19。若為不同類型場所（咖啡廳、辦公室、市場），請在 JSX 中變更商店的部件：它只是簡單的立方體、平面與 Canvas 紋理。 |
film/kit.tsx | camMove（平滑攝影機關鍵影格 + 手持晃動）、who（沿路徑行走的人物：側面行走時朝行進方向，否則使用排定的姿勢；待機時眨眼）、headAt（頭部上方的螢幕點）、Line（附說話者顏色的字幕）、Card（大型標題或時間卡）、Sfx、steps（腳步聲）、PhoneIn（顯示應用程式畫面的手機）、Dim、Fade、num。 | SPEAKER_COLORS；HEAD 用於兒童頭部高度。 |
film/Look.tsx | FilmLook：來自太陽側的陽光光線、依時間變化的色調、暗角、顆粒感、上下黑邊。 | 將它放在每個 3D 場景上，並使用相同的 time。 |
film/overlay.tsx、film/pixel.ts | 頭頂上的像素圖示（bulb sweat heart question coin wifiOff clock zzz）以及 FoundBox（顯示找到物品的方框，附帶計數百分比標籤）。 | 圖示為 pixel.ts 中的小字母網格。 |
components/ui.tsx | Phone：顯示 1080×1920 螢幕截圖的手機框架，可縮放關鍵影格 (cams)、點擊與滑動。 | — |
film/Film.tsx | 起始範本：早晨以起重機鏡頭帶出標題與跟隨步行；黃金時段的雙人對話；夜晚，所有人揮手，鏡頭拉遠並上升，結束卡。 | 替換為您的故事。 |
scripts/make-music.mjs + music-plan.json | 原創 upbeat 曲目（120 BPM，C–G–Am–F；馬林巴琴、鋪底音色、貝斯、主旋律鉤子、漸強音、最後重擊），根據計畫安排，以及電影感音效（whoosh、pop、tap、tick、beep、chaching、chime、shutter、scan、detect、check、sparkle、impact、printer、stamp、page、womp）。 | 計畫以秒為單位：sections（前奏 / 主歌 / 間奏 / 結尾）、lead 和 up 範圍、hits（重拍）、final（結束前 4 秒）。 |
scripts/make-sfx.mjs | 8-bit 音效，存放於 public/audio/8bit/（talk、coin、idea、cash、step、jump、select、done、scan、detect、womp、pop、tap、whoosh）以及可選的晶片音樂曲目。 | — |
scripts/capture-screens.mjs | 將網頁應用程式的真實畫面截圖為手機螢幕截圖（請參閱下方說明）。 | scripts/shots.json |
scripts/stills.mjs、scripts/audio-check.mjs | 在長時間渲染前檢查影格與音樂。 | — |
攝影機語法（讓影片具有電影感）
- 開場使用起重機鏡頭：從街道高空廣角下降至街道層級（
[-5, 7.5, 21] → [-1.5, 2.6, 13.5]，fov 34）。 - 跟拍：從馬路側跟隨行走的人物：攝影機 x = 人物 x + 0.9，z ≈ 7.4，y ≈ 1.35，對準人物，fov 30。
- 雙人鏡頭在商店正面，從顧客側面拍攝，而非從背後（當顧客站在 x 0.7 時，攝影機 x ≈ −0.9），否則顧客的圖層會擋住另一個人。
- 特寫：緩慢推進（fov 24–28），攝影機高於櫃檯高度（y ≈ 2.1 對準 y ≈ 1.36），以免櫃檯上的物品遮住臉部。
- 過肩鏡頭從內部拍攝，位於
backPhone姿勢的人物後方：該人物在畫面下方，櫃檯與外面的顧客都看得到。 - 一排人物：側向平移拍攝。
- 結尾：所有人向攝影機揮手，然後拉遠且上升越過整條街道（
[0, 1.6, 7.6] → [0, 10.5, 27]，向上看向[0, 3.6, 0]），結束卡疊加在上方，最後淡出至黑色。 - 時間卡（早晨、中午、黃金時段、夜晚…）在光線變化時顯示於頂部；對話字幕顯示於底部（在影片尺寸下，它們比對話框更容易閱讀）。
- 場景開始於小節線（60 影格的倍數），並設定音樂計畫，使重拍落在關鍵時刻，最後重擊落在結束卡。
展示真實應用程式
展示真實產品，而非模擬圖。對於網頁應用程式（或行動應用程式的網頁版）：使用偽造資料填充，然後執行 node scripts/capture-screens.mjs scripts/shots.json（需要 npm i -D playwright && npx playwright install chromium）。它會將 1080×1920 的手機螢幕截圖存入 public/shots/。對於 "camera"，提供一張 JPEG，應用程式的攝影機將看到該圖片，因此掃描或辨識功能可以實際運作；使用偽造商品繪製該場景（使用 sharp 或 Canvas 將 SVG 轉為 JPEG），避免使用真實品牌。將螢幕畫面放入 PhoneIn / Phone，並將點擊動作與 tap/select 音效同步。影片中顯示的任何數字（價格、百分比匹配）都應是應用程式實際產生的。
檢查，然後渲染
npm run stills -- 100 400 900 …→out/stills/*.jpeg以半尺寸輸出。檢查每個場景的影格：人物互相遮擋、臉部被遮擋、文字壓在招牌上、夜晚看起來像白天、字幕壓在雜亂區域。在渲染前修正；完整渲染很慢。node scripts/audio-check.mjs：250 Hz 以下低於約 65%，且 250–2000 Hz 在 30% 以上，否則音樂在手機和筆電喇叭上聽起來像沒聲音。npm run render（--gl=swangle：在 CPU 上使用 WebGL）。啟用陰影，在 1080p 下預計每秒數影格（80 秒的影片在小伺服器上約需 2 小時）；請在背景執行。或者使用者可以在瀏覽器中透過 GPU 從 studio 渲染。
常見陷阱
- 直式畫面很窄：距離攝影機軸線 1 公尺、距離 2 公尺的人物會超出畫面。在 9:16 中，請垂直分開主體（攝影機在高處，近處的人物在畫面下方）。
- 圖層擋住攝影機：人物擋在攝影機與主體之間會填滿畫面（它們是大的平面）。請移動攝影機，而不僅是人物。
- 低音過重的音樂在小喇叭上聽起來像靜音：為低音添加諧波，保持和弦與旋律在中頻，不要強烈低通濾波。
- 夜晚過亮：保持環境光與天空光較低，讓燈具、招牌與亮燈的窗戶照亮場景（預設已這樣設定）。
- 紋理：將非同步載入包裹在
delayRender/continueRender中，且永遠不要請求不存在的檔案（渲染會卡住）。 - 確定性：影格或生成的音訊中不得使用
Math.random（使用種子亂數，或 Remotion 的random(seed)），以便重新渲染時保持一致。 - 字型隨著
public/fonts提供（Poppins、Caveat、Press Start 2P；SIL 開放字型授權），因此渲染無需網路。 - Remotion 自帶的 ffmpeg（
node_modules/@remotion/compositor-*/ffmpeg）濾鏡較少：解碼為 PCM WAV 進行分析，使用 libmp3lame 編碼 MP3，使用-ss抓取影格。
規則
- 僅使用原創角色、地點與產品：不得使用真實品牌、商標或人物，也不得重現任何特定的現有遊戲、電影或節目（其角色、藝術風格或外觀），即使重新命名也不行。
- 廣告中的主張必須與產品事實相符。指出使用者發布前必須確認的任何事項（例如「在 app store 上免費」僅在其公開後才能使用）。