Communitygithub.com

Hive-RSI-Lab/video

製作展示影片、精華片段或 GIF,內容涵蓋網頁應用、終端機或 3D 場景,以程式碼驅動,流暢且影格精準。當需要展示影片、精華片段、產品 GIF,或螢幕錄製效果不佳時使用。

video 是什麼?

這是一個專為開發者與 AI 代理設計的影片製作技能,能產出精準、流暢且可重現的展示影片、精華片段或 GIF,支援網頁應用、終端機與 3D 場景。透過虛擬時鐘驅動,每 1/30 秒擷取一個影格,確保所有動畫、計時器、捲動與按鍵動作都落在精確的影格上,並在事後疊加鏡頭移動、游標與點擊效果。此腳本化的方法避免了傳統螢幕錄製的卡頓與不可重現問題。本技能適合用於產品展示、教學影片、除錯記錄與自動化測試,主要支援平台包括網頁應用 (透過 film.mjs 腳本)、終端機 (使用 kit/term.mjs 錄製 tmux/bash 會話) 以及 3D 渲染 (透過 Blender 腳本)。其工作流程包含建立腳本、渲染影片、輸出影格表、檢測卡頓與壓縮成最終 MP4 或 GIF,並提供豐富的導演 API 與除錯工具。

相容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Hive-RSI-Lab/hive-video/tree/HEAD

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

製作影片

不要使用螢幕錄製。當系統忙碌時,錄製會出現卡頓,而且修復後也無法重新執行。改為將影片撰寫成腳本。此工具組使用虛擬時鐘驅動頁面,每 1/30 秒的頁面時間擷取一個影格,因此所有動畫、計時器、捲動與按鍵輸入都會落在精確的影格上。鏡頭移動、游標與點擊效果會在影格之後疊加。相同的腳本總是能產出相同的影片。

工作流程

  1. video new DIR 會寫入一個起始的 DIR/film.mjs 檔案。將它指向一個裝有假資料的臨時伺服器,絕對不要指向真實帳戶。撰寫三到五個橋段,每個橋段一個重點。
  2. heavy timeout 1800 video render DIR/film.mjs OUT/ 會拍攝影片、編碼每個橋段,並將這些橋段拼接成 MP4 檔案。首次渲染會先執行 video check。如果畫面上出現任何拒絕清單上的文字,渲染就會失敗。
  3. video sheet OUT/film.mp4 OUT/sheet.png 16,然後檢視影格表。大多數錯誤只會在這裡出現:從未捲動的清單、空白的面板、鏡頭對錯目標。
  4. video stutters OUT/film.mp4 必須報告 0 次卡頓。卡頓指的是快速或跳動的動作。在內容本身需要切換的地方(例如頁面切換、訊息送達),卡頓是可接受的;--allow A-B 可跳過這些時間段。
  5. video mp4 IN OUT.mp4 會產出網頁適用的 MP4 (H.264, faststart)。video gif IN OUT.gif --max 3 會逐步將寬度從 960 像素降低,直到 GIF 大小控制在 3 MB 以下。
  6. 透過修改腳本中的時間設定來疊代,切勿透過修剪影片來調整。

節奏與完整的導演 API 位於 kit/KIT.md;請在製作第一部影片前先閱讀。簡要說明:總長度約 20 秒;功能在 2 秒內啟動;每個橋段一次鏡頭移動 (1.5-2 倍縮放,0.4-0.7 秒);結果至少停留 0.8 秒 (d.show);輸入速度約每秒 30 個按鍵。

如何讓影片流暢(從經驗中學到的)

  • 將僅供影片使用的修飾放在初始化腳本中,而不是應用程式中。 讓新項目以淡入效果出現(使用動畫 animation: in .4s cubic-bezier(.16,1,.3,1),從透明度 0 與 translateY 12px 開始),而不是突然跳出。對於會跳轉到結尾的清單,請包裝 Element.prototype.scrollTop 的 setter,使其在大約 500 毫秒內平滑滑動。hive-stars 展示影片是包含這兩種技巧的實際範例。
  • 使用 setTimeout 驅動自己的動畫。 腳本的時鐘會精確執行計時器。當時鐘暫停時,requestAnimationFrame 回呼可能不會觸發。
  • 查閱頁面的時間軸。 如果應用程式依賴計時器(例如在 0.7 秒、1.8 秒等時間點回覆預設訊息),請調整每個橋段的 hold 時間來配合它們,讓橋段在顯示的內容出現後立即結束。
  • zoom 與視口單位。 導演的 zoom: 1.5 會以 1920x1080 的尺寸拍攝一個 1280x720 佈局的畫面。Chrome 不會根據根層級縮放來除以 vh/dvh/vw,因此工具組會在同來源樣式表中重寫這些單位。如果不這樣做,calc(100dvh - x) 的佈局會高出 1.5 倍,導致其捲動器永遠無法捲動。跨來源的 CSS 不會被重寫,因此請自行託管頁面。
  • 會修補 Date 的應用程式。 工具組透過自己保存的 Date 來讀取時鐘,因此包裝了 Date(例如時間偏移、假的「現在」)的頁面無法讓 pauseAt 倒退。
  • 拒絕清單: 主機名稱、使用者名稱、Git 名稱與電子郵件、真實專案名稱。只能使用假資料。

3D 拍攝 (Blender)

video blender SHOT.py OUT/ [--quality preview|final] 會在 CPU 上渲染一個拍攝腳本。請在您的任務限制器下執行它(在 H2 上使用 heavy),並先執行 --quality preview,因為最終渲染可能需要數分鐘才能完成一秒鐘的影片。輔助工具(包含緩動、具景深的攝影機、燈光裝置、從 KiCad 匯出的 PCB、GDS 擠出、UI 平面、節點圖)位於 kit/blender/README.md。使用工具組的 encodeFrames 或 ffmpeg 對影格進行編碼,然後透過 stitch 將它們剪接在一起。

終端機

kit/term.mjs 會在一個具有假家目錄與主機名稱的沙盒中錄製真實的 tmux/bash 會話,然後使用 xterm.js 在影片時鐘上重播它。請參閱 kit/KIT.md。

相關技能