Communitygithub.com

ronnnerr/norstack

程式化 React 影片。用於 Remotion 疊加層、動態圖形,或渲染成 mp4 的 React 組合。僅產生動畫,原始素材保留在影片和直向畫面中。

norstack 是什麼?

這是一個專為 Remotion 設計的 AI 技能,用於在 React 中程式化生成動畫,並將其渲染為 mp4 影片。它專注於「產生的動畫」,而非原始影片素材——素材仍保留在 `video` 和 `portrait` 容器中。技能強制要求嚴格的專案結構:所有檔案必須放在 `<videos_dir>/edit/animations/slot_<id>/` 目錄下,並輸出 `render.mp4`。它規定了關鍵法則,例如以 `durationInFrames` 作為時間依據、使用 `interpolate` 和 `spring` 而非 CSS 佈局動畫、以及透過 `Sequence` 和 `AbsoluteFill` 實作單一想法組合。渲染後,技能會自動執行 `ffprobe` 檢查輸出。它也處理進階影片規則,如疊加層 PTS 偏移、字幕順序,以及為父剪輯添加 30 毫秒音訊淡入淡出。支援透明疊加層,可選擇 ProRes 4444 或 WebM 格式。此技能適用於 Cursor 和 Claude Code 等平台,透過 `profile` 和 `taste` 提供專案專屬色板,避免使用通用樣板,並要求在 slot agent 中直接做出決定而非提出問題。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ronnnerr/norstack/tree/HEAD/skills/remotion

在你喜歡的 AI 中提問

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

說明文件

Remotion

素材 → video / portrait。此技能僅用於 產生的 React 動畫。

目錄位置

絕不在專案根目錄。一律為:

<videos_dir>/edit/animations/slot_<id>/

在此建立骨架。渲染至 render.mp4。將 EDL 疊加層指向該檔案。

原則

  • durationInFrames 是唯一的時間依據。不要用 CSS 猜測秒數。
  • 使用 interpolate / spring。不要使用線性動畫。不要使用佈局動畫(top/left/width)。
  • 使用 Sequence + AbsoluteFill。每個組合只負責一個概念。
  • 預先載入字型和音訊。缺少字型會導致重新渲染。
  • fps 需與父層一致(24 為電影,30 為社群媒體),除非你另外指定。
  • 透明疊加層 → 使用 ProRes 4444 或含 alpha 的 WebM。選擇前請先確認。

渲染後

ffprobe render.mp4
# 然後查看/檢視輸出影格

嚴格的影片規則仍然適用:疊加層 PTS 偏移、字幕放最後、父剪輯處添加 30 毫秒音訊淡入淡出。

冒險

色板來自 profile 和 taste。每個專案都有自己的色板。不要留下橘色的啟動影片套件。

不要在 slot agent 內提出問題。選最明顯的方案並渲染。

相關技能