ccvideo — Claude風格產品宣傳影片

ccvideo — Claude風格產品宣傳影片 是做什麼的？

你正在製作一段簡短的宣傳影片（20–45 秒，1920×1080 @ 30 fps），風格遵循 Anthropic 的 Claude 發表影片視覺語言：暖陶土色畫布、單一 macOS 終端機視窗中執行 Claude Code 階段、文字逐字鍵入與串流顯示、鎖定構圖間的簡短鏡頭推移、襯線標題卡片。

前置需求

1. 必須有一個 Remotion 專案。如果沒有，請建立一個： npx create-video@latest --yes --blank --no-tailwind . 接著 npm i。
2. 套件（使用 npx remotion add <pkg> 安裝以確保版本匹配）： @remotion/google-fonts、@remotion/transitions、zod（需明確宣告 zod —— 函式庫會直接匯入它；不要依賴它是傳遞性相依套件）。
3. 元件庫必須存在於 src/ccvideo/。如果不存在，請將此技能的 templates/ 目錄中的所有檔案複製到 src/ccvideo/。請勿從頭重寫這些元件。
4. 擷取/驗證工具必須存在於專案根目錄的 scripts/ 中。如果不存在，請將此技能的 scripts/ 目錄（包括 scripts/lib/）複製到該處。所有腳本會根據你執行它們的目錄解析 captures/，因此請始終在專案根目錄執行它們。

真實資料（不可協商的內容規則）

影片內容絕不手動寫入場景元件中。顯示的每個事實——數字、路徑、端點、命令輸出、行數——都必須來自實際執行的擷取：

• 每個影片都有一個 captures/<name>/ 目錄，存放原始產出物（API 回應、提取的階段事件）以及從中確定性建立的 props.json。props.json 是組合渲染的單一事實來源。
• 先擷取。 在製作影片之前，先執行真實操作：
  • node scripts/capture-xapi-cli.mjs —— 透過 xapi CLI 取得即時 X 資料（npx xapi-to，金鑰位於 ~/.xapi/config.json；xapi 技能位於 .agents/skills/xapi/ 中，記錄了其所有功能）。
  • node scripts/capture-x-user.mjs —— 官方 X API 變體（需要 X_BEARER_TOKEN；--sample 會寫入佔位資料，並將 raw-meta.json 標記為 sample: true——絕不發佈範例擷取）。
  • node scripts/transcript-to-props.mjs <session.jsonl> --prompt-match <str> --out captures/<name> —— 重播真實的 Claude Code 階段回合（記錄檔位於 ~/.claude/projects/<project-slug>/*.jsonl）。
  • 新的資料來源？按照相同模式撰寫新的擷取腳本：取得真實資料 → 儲存原始資料 → 透過 scripts/lib/ 中的共享確定性建構器建立 props。
• 發佈前務必驗證： node scripts/verify-props.mjs captures/<name> 會從原始產出物重建 props，並在發現任何手動編輯時失敗。透過重新擷取來修正，絕不編輯 props.json。
• 誠實重播邊界：節奏是表現問題（打字速度、旋轉動畫時間），但功能必須真實——影片只能展示被擷取的執行實際做了什麼。這延伸到外觀：階段標頭的事實（Claude Code 版本、當前工作目錄）來自擷取（claude --version、實際路徑），否則省略該標頭；旋轉動畫的 token 計數器僅在擷取提供真實的 thinkingTokens 值時才渲染（否則只顯示秒數）。範例擷取會直接使 verify-props 失敗（--allow-sample 僅用於管道測試）。
• 擷取目標是提交安全，具有深度防禦——並非保證：transcript-to-props 僅保留影片實際使用的輸入（選取事件的顯示行 + 計數、一個截斷的命令輸出、摘要要點行）、清理機密格式字串（API 金鑰、Bearer token、URL 憑證、env/JSON 密碼欄位、私鑰），並將正常與扁平化 home 路徑都重寫為 ~——所有這些都在 props 建立之前完成，因此 props、影片和歸檔的原始資料都看到相同的經過編輯的內容。模式列表永遠不可能完整：在提交前務必檢查擷取，並將任何編輯警告視為停止標誌。

工作流程

1. 先擷取（參見真實資料）：從真實執行中產生 captures/<name>/props.json。
2. 從擷取建立劇本表。 呈現文字（卡片標題、思考用詞）位於擷取腳本的常數/旗標中——選擇一個提示、程式碼段、執行輸出、摘要要點。目標是經典弧線：程式碼 → 建立 → 執行+輸出 → 摘要。
3. 組合： 在 src/Root.tsx 中註冊一個 <Composition>，使用來自 src/ccvideo 的 GroundedVideo，搭配 schema={groundedVideoSchema}、從擷取的 props.json 匯入的 defaultProps，以及透過 groundedVideoDuration 推導持續時間的 calculateMetadata——持續時間會自動跟隨內容。超出標準弧線的自訂場景工作：使用函式庫基本元件建構，遵循相同規則。
4. 使用靜止幀驗證 再宣告完成。為每個段落渲染一個靜止幀： npx remotion still <CompId> --frame=<n> --scale=0.5 out.png 並檢查它們。確認：沒有被終端機視窗裁剪（渲染輸出中的 [ccvideo] 溢出警告表示需要修剪段落）、節奏感覺從容、顏色符合色板。
5. 執行 node scripts/verify-props.mjs captures/<name>，然後使用 npx remotion studio --no-open 預覽；最終渲染使用 npx remotion render <CompId> out/<CompId>.mp4（加上 --props=captures/<name>/props.json 來渲染不同的擷取而不修改程式碼；加上 --scale=2 可獲得 4K 主版本，如同官方展示——組合在程式碼中保持 1920×1080 @ 30 fps）。

兩種主題

根據產品選擇，兩者共享品牌陶土色 #D97656/#D97757：

• 陶土色（預設）——溫暖畫布，Claude Code REPL 階段。適用於代理/AI工作流程故事。元件：GroundedVideo/DataSession。
• 深色（ant CLI 展示語法）——近乎黑色的畫布 #0B0B0B，暖黑色終端機 #181716 僅以微妙邊框分隔，Shell 提示符 ▶ ~/dir >（箭頭 #8B92C9，角括號 #5FA97B），奶油色襯線 #D6D4CF。結構是分章的：像素標誌字標卡片 → [每章：過場卡片（單色導語 + 細分隔線 + 襯線主張） → 全新 shell 段落（輸入真實命令，真實輸出淡入，空閒提示符返回）] → 字標結尾。適用於 CLI/開發工具產品。元件：DarkVideo/ShellBeat/InterstitialCard/WordmarkCard，theme.ts 中的色板 dark，結構 darkVideoSchema（如同淺色主題從擷取建立——例如由 capture-xapi-cli.mjs 寫入、verify-props.mjs 驗證的 props-dark.json）。

視覺風格（不可協商的樣式規則）

• 畫布 #CC7D5D，終端機 #2B2C36，標題列 #3A3634。正文 #E3E4EB，暗淡 #9899A1，註解 #6C6E6A，行號 #83848C。強調色：淡紫 #B8B9F2（路徑、行內程式碼、字串），水鴨綠 #85BEC5（關鍵字），金色 #F2C43D（狀態箭頭）。全部定義在 src/ccvideo/theme.ts 中——請匯入使用，絕不硬編碼。
• 字型：所有終端機內容使用 JetBrains Mono，標題卡片使用 Source Serif 4。透過 @remotion/google-fonts 在 theme.ts 中載入，並已附加 Noto Sans SC 作為兩個字型堆疊的 CJK 後備字型——中文提示開箱即用。
• 終端機視窗 1560×950 置中（當階段顯示 header 時為 985；深色主題為 1860×1010），14 px 圓角，深色柔和陰影，三個交通燈，單色標題列文字反映任務，例如 dev — · Implement X — claude — 106×31。
• Claude Code 階段必須看起來真實：> 輸入行位於金色 ⏵⏵ auto mode on (shift+tab to cycle) · esc to interrupt 狀態列上方（兩者始終可見，固定在底部）；輸入行正上方固定高度區域中的 ✻ Cogitating… 旋轉動畫；● 工具結果項目符號；以 … +N lines (ctrl+o to expand) 結尾的編號程式碼區塊；以 - 項目符號組成的粗體 What it does 摘要。
• 攝影機：在終端機場景上永遠不允許持續的縮放或平移——緩慢的分數縮放會使小型單色文字明顯漂移和晃動。唯一允許的攝影機運動是 <CutZoom>：在鎖定構圖之間簡短、強烈緩動的移動（約 0.6 秒） ——推入密集內容，保持，拉回以顯示結果。文字只能在有意的快速移動期間進行中階縮放，絕不能持續數秒。拉出時保持與推入時相同的 origin，以免看起來像橫向滑動。DataSession 會在 run 段落周圍自動套用此效果。<SlowZoom> 僅限於標題卡片。
• 階段真實性外觀（全部由結構驅動，全部可選）： header（像素標誌 + Claude Code vX + 模型/當前工作目錄行，始終可見）、提示提交時 windowTitleIdle → windowTitle 切換、以高亮區塊顯示的提示回顯、帶有即時 (Ns · ↓ N tokens) 計數器和可選 ⎿ Tip: 行的旋轉動畫、僅在執行工作時獲得 esc to interrupt 的狀態列。額外的段落類型：answer（豐富散文區塊）、alert（紅色高亮行）、tool 段落可能帶有 ⎿ 子行。
• 無記錄偏移。 終端機文字只能原地淡入：視窗內無位置性入場動畫，且絕不掛載/卸載會使其下方的行重新排列的元素——短暫行（旋轉動畫、進度）位於固定高度區域中，因此它們的消失不會移動任何東西。
• 標題卡片：在陶土色畫布上使用近乎黑色 #1F1508 的襯線標題，68% 透明度的單色副標題，淡入入場。標題 ≥ 132 px，副標題 ≥ 52 px（在 1920 寬度下）。

元件 API（src/ccvideo）

資料驅動層（適用於整個影片）：

• <GroundedVideo {...props}> —— 開場卡片 → 階段 → 結尾卡片，完全來自 groundedVideoSchema 值（擷取的 props.json）。
• <DataSession {...props.session}> —— 渲染任何 sessionSchema 值：可選標頭、提示打字、旋轉動畫，接著是 beats（區分聯集：code、tool、run、summary、answer、alert）。自動套用執行段落的剪裁縮放；在內容會溢出時於渲染時發出警告。
• sessionTiming(props, fps) / groundedVideoDuration(props, fps) —— 純計時推導；在 calculateMetadata 中使用。
• <Rich segments> —— 渲染 JSON 區塊 {t: 'plain'|'kw'|'code'| 'comment'|'dim'|'bold', s}；從 props.json 到樣式文字的橋樑。

呈現基本元件：

• <TerminalWindow title width? height? variant?> —— 畫布上的視窗（深色主題使用 variant="dark"）。子元素為 flex 欄；給予記錄 flex: 1，使 <InputBox> + <StatusBar> 固定在底部。
• <TypeText text from cps? cursor?> / <Cursor> —— 打字機效果，35–45 cps。
• <InputBox typedText? from? cps?> —— > 行；無 typedText 時顯示閃爍游標。
• <StatusBar mode? hint?>。
• <Thinking from? until? word? stats? tokens? tip?> —— 旋轉動畫；stats 顯示即時 (Ns)——以及僅在 tokens 攜帶真實擷取計數時顯示 ↓ N tokens；tip 新增 ⎿ Tip: 行。將其放在記錄與輸入之間的固定高度區域中；until 會使其原地淡出。
• <Line from?> —— 一個輸出行，8 幀淡入（僅透明度）。
• <ToolLine from> —— ● 項目符號行。
• <CodeBlock from lines stagger? startLineNo? expandNote?> —— 編號行。
• Token 區塊：<K> 關鍵字，<C> 程式碼/路徑，<Cm> 註解，<Dim>，<B>。
• <SessionHeader version modelLine>、<PromptEcho>、<AlertLine from?>、<ToolChild from?> —— 階段外觀（參見樣式規則）。
• <CutZoom cuts={[{from, scale?, origin?, ease?}]}> —— 鎖定構圖之間的簡短緩動移動；終端機場景上唯一允許的攝影機運動。
• <SlowZoom from? to?> —— 僅限標題卡片，絕不環繞終端機。
• <TitleCard title subtitle? titleSize?>。

所有動畫都是幀驅動的（useCurrentFrame + interpolate，已箝制，內聯在 style 中）。絕不使用 CSS transition/animation。