Communitygithub.com

kguevaram94/remotion-playground

Best practices for the Remotion Shorts factory in this repo. Use when editing ShortVideo, pipeline phases, animations, FFmpeg post-process, or adding animation libraries.

What is remotion-playground?

remotion-playground is a Claude Code agent skill that best practices for the Remotion Shorts factory in this repo. Use when editing ShortVideo, pipeline phases, animations, FFmpeg post-process, or adding animation libraries.

Works with~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kguevaram94/remotion-playground/tree/HEAD/.cursor/skills/remotion-shorts

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

Remotion Shorts — skill del repo

Formato oficial: logic-lateral

Referencia: output/s4-19-interruptores/ · plantilla: data/templates/script-logic-lateral.json.

Beat: hook → rules → countdown → explanation → reveal → outro (CTA comentar).

Visuales: 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

Builder automático (título con interruptor/bombilla): src/shorts/templates/three-switches.ts.

Reglas de oro

  1. Toda animación depende de useCurrentFrame() / interpolate / spring.
  2. Datos declarativos en JSON; componentes en src/shorts/remotion/components/.
  3. No añadir GSAP, Anime.js o Motion Canvas sin integración oficial frame-sync y justificación.
  4. FFmpeg/Satori van en post-proceso, no dentro de la composición.
  5. No romper HelloRemotion ni ScriptVideo.
  6. Outro logic-lateral siempre pide comentar.

Dónde tocar

CambioArchivo
Nueva escena visualcomponents/ + rama en ShortVideo.tsx + schema
Plantilla / detecciónsrc/shorts/templates/ + select.ts
Pipelinesrc/shorts/pipeline/
Thumbnailsrc/shorts/media/thumbnail.ts
FFmpegsrc/shorts/media/ffmpeg.ts
Render optsrender-video.ts (gl: angle, bundle cache)

Referencia externa

Related Skills