Communitygithub.com

kguevaram94/remotion-playground

此儲存庫中 Remotion Shorts 工廠的最佳實踐。在編輯 ShortVideo、管線階段、動畫、FFmpeg 後製或新增動畫庫時使用。

remotion-playground 是什麼?

此技能定義了以「邏輯側邊」格式建立 Remotion Shorts 的標準化工作流程。它強制使用基於幀的動畫(useCurrentFrame、interpolate、spring)和宣告式 JSON 資料,同時限制使用 GSAP 等第三方動畫庫,除非有適當的幀同步整合。該技能指定了專案結構,將元件組織在 `src/shorts/remotion/components/` 中,管線邏輯在 `src/shorts/pipeline/` 中,FFmpeg 後製在 `src/shorts/media/` 中。它支援透過 JSON 範本進行腳本撰寫、自動化短影音生成、場景偵測,以及定義了視覺元素(如 logic-room、switch-sequence、bulb-state-reveal)的明確節拍結構(hook、rules、countdown、explanation、reveal、outro)。輸出始終是 CTA 評論。此技能與 Remotion 生態系統相容,提供的參考資料涵蓋第三方庫、FFmpeg、Three.js 和 Rive。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kguevaram94/remotion-playground/tree/HEAD/.cursor/skills/remotion-shorts

在你喜歡的 AI 中提問

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

說明文件

Remotion Shorts — 儲存庫技能

官方格式:logic-lateral

參考資料:output/s4-19-interruptores/ · 範本:data/templates/script-logic-lateral.json。

節拍:hook → rules → countdown → explanation → reveal → outro(CTA 評論)。

視覺元素:logic-room、switch-sequence、bulb-state-reveal(+ countdown、text)。

cp data/templates/script-logic-lateral.json data/topics/mi-reto.json
npm run generar-short -- --input data/topics/mi-reto.json

自動建構器(標題含開關/燈泡):src/shorts/templates/three-switches.ts。

黃金規則

  1. 所有動畫依賴 useCurrentFrame() / interpolate / spring。
  2. 宣告式資料在 JSON 中;元件在 src/shorts/remotion/components/ 中。
  3. 若無官方幀同步整合及正當理由,不得新增 GSAP、Anime.js 或 Motion Canvas。
  4. FFmpeg/Satori 放在後製中,不在合成內。
  5. 不得破壞 HelloRemotion 或 ScriptVideo。
  6. Logic-lateral 的 outro 總是要求評論。

修改位置

變更檔案
新視覺場景components/ + ShortVideo.tsx 中的分支 + schema
範本 / 偵測src/shorts/templates/ + select.ts
管線src/shorts/pipeline/
縮圖src/shorts/media/thumbnail.ts
FFmpegsrc/shorts/media/ffmpeg.ts
渲染選項render-video.ts(gl: angle、bundle cache)

外部參考資料

相關技能