faizalmy/brand-film

品牌影片

一部關於單一品牌識別的60秒影片：標誌、網站、產品、名稱。首部已核准影片：ReUI「Refreshed」。template/ 是其程式碼：一個可供複製與改編的工作參考實作，而非通用函式庫。

• brands/<brand>.md：所有品牌特定資訊（調色盤、字型、文字來源、標誌、產品、音樂、規則、偏好）。請優先閱讀。若為新品牌，請從 brands/_new-brand.md 撰寫一份。
• references/example-reui-refreshed.md：已核准影片的鏡頭地圖，包含影格與節拍點。這是您需要改編的形狀。
• references/reui-frames/：視覺範本。包含已核准影片的38張靜止幀與 sheet.jpg。設計前請先檢視總覽圖，並在檢查時將您的靜止幀與對應的參考影格進行比對。
• references/review.md：弱點檢查清單與子代理審查簡報。

先決條件（先檢查，安裝缺少的項目）

在機器上進行第一次建置前，請執行以下檢查。僅安裝失敗的項目，並告知使用者您安裝了什麼。

需求	檢查方式	安裝方式
Node 20.19+	node -v	brew install node（或使用 nvm）
Remotion 及其渲染器	在專案中執行 npx remotion versions	在專案中執行 npm i（版本鎖定在 template/package.json）；在既有專案中：安裝 npm i remotion @remotion/cli @remotion/renderer @remotion/fonts @remotion/media，且版本需一致
供 Remotion 使用的 Chrome	npx remotion browser ensure	同上指令；它會下載 Chrome Headless Shell
ffmpeg / ffprobe（最終檔案檢查）	ffprobe -version	brew install ffmpeg
Python 3 + Pillow（聯絡頁面）	python3 -c "import PIL"	pip3 install pillow
librosa + numpy（beat.py，僅用於新曲目）	python3 -c "import librosa"	pip3 install librosa numpy
Playwright + Chromium（擷取畫面）	在專案中執行 node -e "require('playwright')"	npm i -D playwright && npx playwright install chromium
音樂背景音樂	位於 public/audio/ 的檔案	來自品牌設定檔指定的來源；切勿自行編造

Remotion 授權：個人與小型團隊免費；超過其規模限制的公司需要公司授權（https://remotion.dev/license）。若品牌為公司，請提及此點。

視覺語言（每個品牌皆相同）

• 使用品牌自家中性色調的單一畫布與單一墨水。僅在品牌真正擁有的地方使用色彩，或在其真實 UI 內部使用。除非品牌本身由玻璃、金色、3D 或發光構成，否則不使用這些效果。
• 單一元素引領全局。 它沿著一條細線飛翔，承接剪輯點，並最終降落在最終標誌中。每個鏡頭在同一個畫面位置上將它傳遞給下一個鏡頭。在 ReUI 的標誌中，這個元素是點。在新的標誌中找到這個元素：一個點、一個角落、一段筆畫末端。
• 每一條線都是真實的。 建構引導線來自標誌自身的路徑。螢幕上的每個數字都是經過測量的（標誌單位、DOM 方框以 px 為單位）。沒有任何裝飾。
• 使用品牌自身的字體（其網站使用的字體）。僅在測量時使用等寬字體。
• 產品 UI 上不得覆蓋標誌或文字。標籤應位於 UI 外部，並保留清晰空間。
• 長時間的靜止畫面是影片的一部分。平靜可以，死氣沉沉則不行。

故事結構（請改編，勿盲目複製）

部分	節拍（共60拍）	任務
線條	0-8	引領元素變為游標，並打出品牌自己的句子
標誌	8-20	元素展開成標誌；標誌從其建構線條中繪製
網站	20-32	標誌縮小並成為網站自己的導航標誌，然後快速導覽；在一個節拍點上進行真實的網站互動
名稱	32-36	字標，每拍一個字母
產品	36-49	3-4 個真實產品視圖、真實拖曳操作、測量尺寸、硬剪輯，每個約 3 拍
樣貌	49-52	每一拍以不同方式繪製標誌；引領元素保持不動
結尾	52-60	標誌定位，字母在最後一個節拍點上安定下來，然後顯示品牌的句子與網域

將時間分配給品牌引以為傲的部分。在建構或產品部分之前，先修剪樣貌部分。

嚴格規則

• 品牌文字是複製的，絕非憑空書寫。 標語、句子與名稱必須一字不差地來自品牌自身的網站或文件。切勿發明、組合或縮寫。
• 產品 UI 內的示範資料絕不能作為內容：不得出現其名稱、數字或人員。
• 僅使用真實 UI，並以真實滑鼠擷取。切勿模擬產品。
• 音訊：
  • 音樂必須來自品牌設定檔指定的來源，除非設定檔允許，否則不得使用新生成的音樂。
  • 節拍點包含一些在同步點上的撞擊與重擊音效。
  • 除非設定檔要求，否則不得使用點擊或打字音效。
• 未經要求，切勿渲染或匯出。 編輯完成後，交出 Studio 預覽畫面，不要提供渲染檔。當被要求時：使用 4K、相同檔案名稱、覆蓋。
• 嘗試性想法應在重複的合成項目中進行。透過比對靜止幀來證明已核准的合成項目未被更改。「全部修正」或「移除 X」應直接套用於主要合成項目。
• 使用者指出影格（例如「移除 3150」）。在更改任何內容之前，先渲染該影格並命名該鏡頭。

時序系統（容易出錯）

全部位於 src/Refreshed.tsx 中：

• 時鐘。
  • 背景音樂的 BPM。SLOW = 2：故事以音樂一半的速度運行。區域 useCurrentFrame() 回傳減速後的影格。
  • T = 一個故事節拍。b(n) = 節拍 n，對齊至半拍：b(0.25) 不是四分之一拍，請使用 T / 4。
  • real(n) = b(n) * SLOW = 節拍 n 的實際影片影格。
• ramp(f, from, to, ease) 是唯一的動畫方式。它將起點與終點對齊到 T / 8 的格線，並在它們對齊時回傳 1。切勿傳遞 0-1 的分數；請使用 clamp01((x - a) / (b - a))。
• 鏡頭。 SHOTS = [[fromBeat, toBeat, Component]]。移動邊界時，需一併調整該鏡頭內的所有節拍常數。
• 音效。
  • HITS = 在節拍上的音效。
  • BED_FROM = 音樂軌道的起始偏移量。BED_VOL，搭配一個用於音量避讓的 volume 回呼。
• 重拍。 KickBump 根據重拍脈衝調整影格，直到「樣貌」部分。STILL = 無脈衝的節拍範圍。
• 同步點是骨架： 每個重大變化都座落在一個節拍點上。移動一個同步點意味著需要重新固定周圍的鏡頭。
• 新音軌： python3 scripts/beat.py <track.wav> 會提供節奏、第一個節拍的相位以及高潮點。設定 BPM 和 BED_FROM，然後將同步點放在其重音上。

將範本改編至品牌

替換項目	位置
標誌路徑（環、內部形狀、引領元素）、形狀的中心線與筆畫、字標字母與位置、viewBox	src/logo.tsx（RING_D、U_D、DOT、U_LINE、U_STROKE、LETTERS、LETTER_X、VB、uPoint）
調色盤、字體、字距	src/Refreshed.tsx 頂部（INK、PAPER、LIGHT_INK、DIM、FONT、TRACK）以及 public/fonts
品牌的句子與網域	LINE、DOMAIN
網站擷取畫面	一個擷取腳本，例如 scripts/reui/site-object.mjs，將結果寫入 public/cap/site-object/
產品視圖	擷取腳本如 scripts/reui/live.mjs、dash.mjs、block-live.mjs。每個腳本將每個滑鼠步驟的一張螢幕截圖以及測量後的方框寫入 public/cap/live/<dir>/ 和 meta.json。然後編輯 NAMES_UI/BLOCK_UI 條目以及 WITH_UI 中的 dir 聯合
樣貌	LOOKS：3-4 種繪製標誌的方式（例如作為其路徑資料、半色調、建構線條）
音樂與節拍點	public/audio/、BPM、BED_FROM、HITS

具有不同結構（沒有點、沒有環）的標誌需要自己的 Construct、Opening 和 Final。保留核心概念：從其實際幾何形狀繪製，並由一個元素引領。

工作流程

1. 閱讀 brands/<brand>.md（或撰寫一份）。測量標誌 SVG 和網站；收集品牌一字不差的文字。
2. 新影片：
   • 執行 cp -R ~/.claude/skills/brand-film/template <project> 和 npm i。
   • 將背景音樂放入 public/audio/。
   • 擷取腳本從專案資料夾載入 Playwright（npm i -D playwright），或從 PLAYWRIGHT_FROM 指定的資料夾載入。
3. 擷取網站與產品的真實滑鼠操作畫面。在重新擷取前備份 meta.json。選擇彼此不同的產品視圖並拖曳真實元素；切勿進行單純的懸停導覽。
4. 編輯僅限品牌變更的內容（上表所列）。保留輔助元件（Flight、Wipe、Dim、Lead、Disc、Live、LiveRun）。
5. 檢查。
   • 執行 npx tsc --noEmit。僅允許 TS6192（未使用的匯入）的錯誤。
   • 從專案資料夾執行：~/.claude/skills/brand-film/scripts/qa.sh <scratch>/q1 0.4 <frames...>，然後檢視 sheet.jpg。
   • 抽樣每個鏡頭、每個連接處的兩個影格、每個同步影格以及結尾部分。
   • 將您的總覽圖與 references/reui-frames/sheet.jpg 並排比較。任何比範本對應鏡頭更稀疏、更大聲或更擁擠的，皆屬待改進之處。
   • 單一靜止幀可能會閃爍；在修正前重新渲染該影格。
6. 審查（務必執行，在首次交出新的剪輯版本前）：
   • 使用 references/review.md 中的簡報產生一個子代理。它會取得程式碼，而非您的結論。
   • 它會回傳按優先級排序的弱點，並附上影格與一份「請勿更動」清單。
   • 自行檢查其首要發現是否在影格中呈現，並刪除影格未顯示的項目。
   • 向使用者顯示簡短的排序清單，並詢問應修正哪些項目，除非使用者已說「全部修正」。
   • 重新檢查已修正的影格。切勿還原使用者喜歡的內容（依據品牌設定檔）。
7. 預覽在 Remotion Studio（http://localhost:<port>/Refreshed）中進行。交出預覽畫面，而非渲染檔。
8. 渲染（僅在被要求時執行）： 在背景執行：npx remotion render src/index.ts Refreshed out/<name>.mp4 --scale=2 --codec=h264 --crf=16 --pixel-format=yuv420p --overwrite --log=error。然後執行 ffprobe：檢查解析度為 3840x2160、60 fps、影格計數與音訊串流。

每次結尾時回報

變更了哪些內容（按影格）、哪些項目未被檢查（動態與音效永遠無法在靜止幀中顯示）、以及已渲染的 mp4 是否已過時。