vvedantb/eva

eva 產品展示影片

使用現有的 Remotion 專案（位於 video/）製作 eva 應用程式的高階產品展示影片（Linear / Notion 等級）。畫面來自實際執行的應用程式，並透過 agent-browser 捕捉。

**技能選擇錯誤？**這項技能專注於精緻的多場景剪輯（Remotion、音樂、字幕）。若只需單一功能，請優先使用較輕量的 eva-feature-screenshot（一個螢幕截圖加一則推文）或 eva-feature-demo（一個未經修飾的 agent-browser 錄影加一則推文）。上述三種技能的推文文案皆來自 eva-tweet。

標準專案已存在 — 請重複使用，不要從頭開始。

• 專案：video/ · 主要合成：EvaHero（video/src/EvaHero.tsx）
• 渲染輸出：video/out/eva-demo.mp4
• 可重複使用的元件位於 video/src/components/：Backdrop、AppWindow、EvaMark、HeroCaption（+ Accent）、Cursor、Spotlight、StatCounter、SnapIn、tokens。
• 輔助腳本位於 video/scripts/：stills.mjs、gen-music.mjs、check-audio.mjs。

若要製作新影片：為新故事重新捕捉畫面、編輯 EvaHero.tsx 中的場景列表 / 字幕 / 持續時間、重新生成與剪輯時間點匹配的音樂、渲染，並進行品質檢驗。

不可妥協的預設值（從錯誤中學到的教訓 — 只有在有理由時才更改）

以下每一項都曾是錯誤。除非用戶明確覆寫，否則請保留它們。

1. **1280×720，30 幀/秒。**不是 1080p。eva 的 UI 是密集的桌面應用程式；在 1080p 下，它在手機上看起來「太近 / 太大」。720p 是 Twitter / X 上適合手機觀看的甜蜜點。

2. **以畫面的原始佈局捕捉，並全出血顯示。**捕捉時將瀏覽器視窗設定為 1280×720，然後以 1:1 的全出血方式顯示螢幕截圖（填滿整個畫面）。這是唯一最重要的品質槓桿：

   • 以 2560×1440 捕捉再縮小到 720p 會使 UI 文字大小減半 → 看起來「縮得太小」，在手機上無法閱讀。
   • 對相機進行裁切/縮放會顯示 UI 的尷尬片段。
   • 1280 寬的佈局以 1:1 顯示 = 原生元素大小 = 可讀 + 「放大」 + 清晰。

   **零縮放就是零。**對於每個螢幕截圖場景，PanScene 的 from / to 都維持在 { scale: 1.0, fx: 0.5, fy: 0.5 }。即使 1.02–1.06 的「輕微推進」也會裁剪掉觀眾需要的 chrome — 側邊欄標籤、右上角的主要按鈕、統計頁尾。另外，請在螢幕截圖周圍傳遞 <SnapIn from={0.97}>：預設的 1.06 會向內彈出並裁剪掉每個剪輯的開場畫面。動感來自於硬剪輯和字幕彈出，而不是鏡頭移動。

3. 真實畫面，已完成狀態。使用 agent-browser 驅動實際應用程式。記錄已完成的工作（已合併的任務、差異、PR）— 不要等待正在進行的代理執行（沙箱已停止；正在進行的執行緩慢且不穩定）。準備乾淨的輸入（例如新增任務模態框中的一個整潔任務標題）。請參閱 references/capture-workflow.md。

   **絕不提交 — 只輸入。**填寫輸入框、打開選擇器、捕捉畫面。不要在編輯器中按 Enter、不要按發送箭頭、建立、儲存、執行或開始按鈕，也絕不啟動真實的對話或代理執行，即使是為了示範影片也不行。提交會改變用戶的真實工作區並消耗真實的運算資源；已準備好的狀態就是場景所需的一切。只有在提交作用於欄位本身且不影響其他事項時（例如在開啟的選擇器中接受 @ 提及）才允許按 Enter — 否則請點擊選擇器行。

4. **節奏明快、硬剪輯、與節拍同步。**總長約 20 秒。在節拍上剪輯（使用 <Series>，而非長淡入淡出）並讓字幕快速彈入。使用 SnapIn 將場景彈入 — 在標題/結尾卡片上裸露使用，在螢幕截圖上使用 from={0.97}（請參閱預設值 2）。無聊 = 太長 + 太多緩慢的淡入淡出。

5. **音樂與每次剪輯同步。**用戶的偏好是 Lo-Fi、「經典」變體、無拍手聲 — 使用 gen-lofi-variants.mjs 生成，該腳本會為每次剪輯標記一個溫暖的和弦漸強。它接受 --duration、--cuts、--only、--prefix 參數，因此新影片無需編輯腳本：

   node scripts/gen-lofi-variants.mjs --duration=20.5 --cuts=2.5,5.5,8.5,11.5,14.5,17.5 \
     --only=classic --prefix=platform      # → public/audio/platform-music-lofi-classic.wav
   

   --cuts 必須與合成中的場景邊界匹配。gen-music.mjs 是較舊的拍手音效基底 — 僅在用戶要求時使用。請參閱 references/remotion-build.md → 音樂。

6. **符合 eva 的主題。**近乎黑色 #050606、靛藍色強調 #818cf8、品牌標誌漸層紫色 #8B3FB8 → 藍色 #3B7DD8、字型 Inter + JetBrains Mono。全部定義在 video/src/components/tokens.ts 中。切勿發明品牌顏色。

7. 誠實 + 保護機密性。使用用戶自己的儲存庫（vvedantb/eva），絕不使用客戶的儲存庫（Evalucom/CarePulse）。不要顯示「程式碼庫」首頁（列出客戶儲存庫），並在捕捉前檢查文件/任務列表中是否有客戶命名的項目 — 如果列表不乾淨，則準備一個乾淨的示範文件。絕不對螢幕上顯示的名稱或電子郵件提出個人資料問題 —「設定」→「實驗性」功能中有一個模糊 PII 的切換開關，會模糊所有 [data-pii] 元素，因此這已在產品中處理。如果錯誤面板洩漏了環境變數名稱或專案 ID，請務必提出。字幕應如實描述 — 絕不暗示畫面上未顯示的功能。如果唯一可用的捕捉畫面是已停止的沙箱或空白狀態，請修改字幕以符合畫面內容，而不是進行美化。

工作流程

按此順序進行；在執行每個步驟之前，請先閱讀該步驟的參考文件。

1. **規劃腳本。**預設英雄流程（8 個場景，約 20 秒）：標題 → 描述任務 → Eva 編寫程式碼 → 檢閱並合併 PR → 看板 → 專案 → 證明（統計數字計數） → 結尾。先選擇場景和一行字幕。

2. 捕捉畫面 → 閱讀 references/capture-workflow.md。啟動應用程式（pnpm dev），以代理用戶身份登入，將視窗設定為 1280×720，將每個畫面截圖到 video/public/captures/ 中。

3. 合成 / 編輯 → 閱讀 references/remotion-build.md。編輯 EvaHero.tsx：場景列表、持續時間（節拍的倍數）、字幕、輸入場景的游標路徑。重複使用現有元件。

4. 配樂 → 閱讀 references/remotion-build.md → 音樂。使用與場景邊界匹配的 --cuts 參數（上述預設值 5）執行 gen-lofi-variants.mjs，將合成的 <Audio> 指向生成的檔案，並確認 MUSIC = true。

5. 渲染 + 品質檢驗。你無法直接預覽 mp4（沒有系統 ffmpeg，也無法觀看影片）— 因此請使用靜態畫面進行品質檢驗，每個場景一個，取場景中間的幀：

   cd video
   node scripts/stills.mjs "40,110,200,290,380,470,560" EvaPlatform   # 第二個參數 = 合成 ID
   

   合成 ID 預設為 EvaHero — 請明確傳遞它，否則你將檢驗到錯誤的影片。閱讀 video/out/ 中的 PNG 檔案，並檢查畫面的每個邊緣：右上角的主要按鈕是否完整、側邊欄標籤是否完整、字幕是否與即時 UI 文字重疊？然後進行渲染並驗證：

   npx remotion render EvaPlatform out/eva-platform.mp4 --codec=h264 --image-format=png
   node scripts/check-audio.mjs out/eva-platform.mp4   # 持續時間、1280×720、音軌存在
   

   --image-format=png 可保持 UI 文字清晰。迭代靜態畫面直到正確為止，然後再進行渲染。

快速參考

需求	指令（從 video/ 目錄執行）
即時預覽 / 搜尋	npm run dev (Remotion Studio)
捕捉單一畫面	bash scripts/shot.sh /vvedantb/eva/web/sessions sessions-list 4000
渲染一個合成	npx remotion render <Id> out/<name>.mp4 --codec=h264 --image-format=png
檢驗特定幀	node scripts/stills.mjs "40,110,200" <CompositionId>
重新生成音樂	node scripts/gen-lofi-variants.mjs --cuts=… --only=classic --prefix=<name>
驗證輸出檔案	node scripts/check-audio.mjs out/<name>.mp4

現有合成

EvaHero（英雄流程）· SessionsDemo（雲端工作階段）· EvaPlatform（所有五個介面集中於一處：工作階段 → 文件 → 測試場 → 看板任務 → PR 審查）· QuickTasksDemo（舊版）。請在 video/src/Root.tsx 中以 1280×720 / 30fps 註冊任何新的合成。

曾經耗時的問題

• 登入 URL 是 /?agent=true（布林值），而不是 /?agent — 路由會將 agent 驗證為 zod 布林值，因此 /?agent 會拋出「預期布林值，但收到字串」。如果回呼在「正在登入…」時掛起，並顯示「您已登入」，請直接導航到目標頁面。
• **開發者疊加層會出現在螢幕截圖中。**react-scan 會將一個 FPS 工具列渲染到 #react-scan-root 的影子根中，而 agentation 會渲染到 [data-agentation-root] 中。僅靠樣式表無法停用 react-scan — 它的宿主元素帶有內聯樣式，因此還需要在宿主元素上設定內聯 display:none !important。scripts/shot.sh 會同時執行這兩項操作；請使用它，而不是手動建立捕捉鏈。
• 在一個使用 timeout 的 Bash 指令中鏈式呼叫 agent-browser，並將長時間運行的操作置於背景。一個簡單的開啟 → 等待 → 截圖鏈會導致工具超時。來自 snapshot -i 的引用會在開發者工具列展開的瞬間失效 — 在隱藏疊加層後、點擊前重新進行快照。
• 將所有 @remotion/* 套件固定到完全相同的版本，否則打包器會報錯。
• **Claude 無法試聽音樂。**音樂基底會完全按照要求執行（在每次剪輯時漸強），但請告知用戶自行聆聽，並在需要時更換為有授權的曲目 — 設定 MUSIC=false 可靜音。
• 舊工作階段捕捉中的沙箱已停止，因此每個工作階段畫面都顯示「啟動沙箱以…」。不要在字幕中將其描述為正在執行。captures/sessions/ 中的任何內容都未顯示正在執行的沙箱。
• 字幕承載資訊 — 大多數 Twitter 播放是靜音的，因此每個場景都需要字幕。

詳細的操作方法：references/capture-workflow.md（畫面捕捉）和 references/remotion-build.md（合成、主題、音樂、渲染、品質檢驗）。