Mapa de la ruta
Contenido detallado
⚙️ El stack: Claude Code + Remotion + skills
Qué es cada pieza, por qué Remotion se ejecuta en la web y cómo dos comandos cargan 28 archivos de reglas en el contexto de Claude.
Motion graphics tradicional = paneles complejos y keyframes infinitos; la curva de aprendizaje acaba con la idea antes de animarla.
Entender el problema deja claro el beneficio de generar animaciones mediante código con IA.
curva de aprendizaje · keyframes manuales · barrera de entrada.
Remotion es React: HTML/CSS/SVG/Canvas se convierten en frames. Por eso se combina con bibliotecas de animación web.
Es lo que permite integrar después GSAP, D3, Three.js y Lottie.
React · stack web · composición declarativa.
npx skills add remotion-dev/skills y después claude. Eso es todo.
Setup de segundos: la barrera técnica prácticamente desaparece.
npx skills add · carpeta de skills · Claude inicia la sesión.
9 patrones de componentes, 7 tipos de transición, primitivos de animación, integración de audio y mejores prácticas de render.
Es el conocimiento sobre Remotion que Claude adquiere.
component patterns · transitions · rendering best practices.
Las reglas se cargan automáticamente en el contexto de Claude: no tienes que pegar documentación con cada prompt.
Claude ya «sabe Remotion» desde el primer prompt de la sesión.
contexto cargado · skills como conocimiento · cero boilerplate.
Remotion renderiza por frame, de forma determinista — ideal para una línea de tiempo fija, no para interacción.
Explica por qué GSAP encaja tan bien y Framer Motion no tanto (T2).
determinista · timeline fija · frame a frame.
✨ Por qué la skill lo cambia todo
El mismo prompt, dos resultados completamente diferentes. Sin la skill: genérico y tembloroso. Con la skill: spring correcto, secuenciación y transiciones limpias.
Layout genérico, timing extraño, elementos en el lugar equivocado: parece el primer intento de alguien con una animación CSS.
Es el punto de partida contra el que mides la mejora de la skill.
timing tosco · posición incorrecta · sin física.
Transiciones limpias, física de spring correcta, secuenciación adecuada — la diferencia es inmediata.
Muestra que el cuello de botella no es el modelo, sino el contexto que recibe.
spring correcto · secuenciación · transiciones limpias.
Entradas con un ligero overshoot, como un resorte: hacen que la animación parezca viva en lugar de robótica.
Es el detalle que separa lo «amateur» de la «producción».
overshoot · damping · naturalidad.
Los elementos entran en el orden y el momento correctos, no todos a la vez.
El ritmo es lo que le da un aire profesional a la pieza.
orden · offsets · pausas entre elementos.
Texto que se escribe, texto que aparece: limpio. Muchos elementos y transiciones sofisticadas a la vez = caos.
La simplicidad al principio es lo que mantiene la calidad.
alcance pequeño · menos es más · claridad.
Siempre empieza con algo básico y refínalo en turnos dentro de la misma conversación.
Es el método que se profundiza en el módulo 1.3 y en la T4.
esqueleto → refinamiento · iteración · misma sesión.
💬 Cómo conversar con Claude
El método que permite acumular calidad: empezar con un esqueleto y refinarlo en turnos dentro de la misma sesión, dejando que el contexto se acumule.
El primer prompt crea la estructura básica, sin buscar la perfección.
Intentar obtener el resultado final en un solo prompt casi siempre falla.
estructura mínima · sin one-shot · base para refinar.
En el segundo turno ajustas tiempos, offsets y ritmo.
El timing es donde la animación adquiere intención.
duración · delay · stagger.
Ajusta el easing, el spring y las curvas hasta que el movimiento se vea natural.
Pequeños ajustes en la curva cambian por completo la sensación.
easing · spring · pulido del movimiento.
Claude recuerda lo que ya se hizo; cada turno parte del anterior.
La calidad se construye; no empieces desde cero con cada pedido.
memoria de contexto · continuidad · calidad compuesta.
Enumera las escenas («1. entra el titular; 2. tarjetas en stagger…») en lugar de describirlas vagamente.
La secuencia explícita genera un resultado más predecible y correcto.
lista numerada · escena por escena · claridad de intención.
No todo se anima igual: el elemento principal lidera, el resto acompaña.
La jerarquía guía la mirada y evita la saturación visual.
enfoque · soporte · contraste de movimiento.