Cada frame es un componente React dibujado por Remotion. La secuencia de frames es el video.
😩 El problema de After Effects
Hacer motion graphics siempre ha sido doloroso: abrir After Effects, enfrentarse a paneles complicados y keyframes interminables. La curva de aprendizaje es tan empinada que mata la idea antes incluso de que animes.
✗ La forma antigua
- ✗Paneles complejos y timeline de keyframes manual.
- ✗Curva de aprendizaje que desanima antes del primer resultado.
- ✗Difícil de versionar, reutilizar o automatizar.
✓ La forma con código
- ✓Describes en lenguaje natural; Claude escribe el código.
- ✓Versionable en git, reutilizable, parametrizable.
- ✓Iterar es solo continuar la conversación.
🕸️ Remotion se ejecuta en la pila web
El secreto que lo desbloquea todo: Remotion es React. Tus frames son componentes: HTML, CSS, SVG, Canvas. Como vive en el stack web, se combina naturalmente con las bibliotecas de animación que ya existen allí.
🧩 Por eso existe el curso
Si Remotion es web, entonces todo lo que se anima en la web puede formar parte de él:
- •GSAP para coreografía de timeline.
- •D3 para datos que se convierten en historia.
- •Three.js para escenas 3D renderizadas como fotogramas.
- •Lottie para microanimaciones reutilizables.
⌨️ Los dos comandos
Toda la instalación son dos líneas en la terminal. Una agrega la skill; la otra abre Claude con todo cargado.
💡 Consejo
npx no requiere instalación global: ejecuta el comando en el momento. Después del claude, ya puedes pedir una composición Remotion en el primer prompt.
📦 28 rule files
Ese comando instala 28 archivos de reglas: patrones de componentes, transiciones, primitivos de animación, integración de audio y prácticas de render. Es el «manual de Remotion» que Claude pasa a tener en mente.
🧠 Todo en el contexto, automáticamente
Estas reglas se cargan por sí solas en el contexto de Claude. No pegas documentación en cada prompt: desde el primer mensaje, Claude ya «sabe Remotion».
Lo instalas una vez
La skill queda disponible para la sesión de Claude en ese proyecto.
El contexto se carga solo
Los patrones, las transiciones y las prácticas se incorporan sin que tengas que pedirlos.
Solo describes la animación
Cero boilerplate. El foco vuelve a la idea, no a la configuración.
🎬 El modelo basado en frames
Remotion renderiza frame a frame, de forma determinista: el frame N siempre genera la misma imagen. Esto es perfecto para una timeline fija de video y explica por qué algunas bibliotecas encajan mejor que otras (lo verás en la Trilha 2).
🔮 Qué predice esto
Como la timeline es fija y determinista, las bibliotecas de coreografía (GSAP) encajan perfectamente, mientras que bibliotecas reactivas a la interacción (Framer Motion) tienen menos sentido en un video renderizado. Guarda esa idea para el módulo 2.2.
📌 Resumen del módulo
Siguiente módulo:
1.2 — Por qué la skill lo cambia todo: el mismo prompt, con y sin skill.