El mismo prompt. La skill inyecta física de spring; sin ella, Claude usa linear por defecto.
😩 Sin skill: genérico y tembloroso
Cuando le pides una animación a Claude sin ningún contexto de Remotion, él inventa. El código compila, pero el resultado parece un primer intento de animación CSS: timing lineal, elementos en posiciones incorrectas, sin noción de frame rate ni secuencia.
✗ Salida sin skill
- ✗Usa
setTimeouto CSS puro: no hayuseCurrentFrame. - ✗Timing lineal: todo entra al mismo tiempo y a la misma velocidad.
- ✗Elementos posicionados con
absolutey valores mágicos que nunca quedan bien. - ✗Ninguna noción de FPS ni duración en frames; a veces ni siquiera se renderiza.
✓ Lo que debería ser
- ✓Cada prop cambia en función de
frame— determinístico y predecible. - ✓Física de spring con
spring()de la API de Remotion. - ✓Secuenciación mediante
delay+frompor elemento.
✅ Con skill: limpio, spring correcto, secuencias precisas
Con la skill activa, Claude ya sabe que toda animación es una función de frame, que spring() es el helper correcto para transiciones naturales, y la duración se define en frames (no en segundos de CSS). La diferencia no está en tu prompt — está en el contexto que inyecta la skill.
¿Por qué spring y no easing?
El easing describe cómo ir de A a B en un tiempo fijo. Spring describe física: masa, rigidez y amortiguación: el resultado es orgánico e interrumpible. Remotion expone spring() que calcula esto fotograma a fotograma.
✓ Anatomía de una buena animación
- ✓Spring suave —
damping: 14para un overshoot ligero y natural. - ✓Retraso por elemento — cada pieza entra en el momento correcto, no todas juntas.
- ✓Transiciones compuestas — opacity + scale + translateY juntos, no por separado.
📐 Parámetros de spring()
🌊 Física de spring: overshoot y damping natural
El secreto del movimiento orgánico es el overshoot — el elemento sobrepasa un poquito el destino antes de asentarse. No es un error: es lo que hace que el movimiento parezca físico. El damping controla cuánto bounce hay.
La curva de spring supera ligeramente el valor objetivo (overshoot) y se estabiliza: eso es lo que crea naturalidad.
Regla práctica del damping
damping 8–12 → rebote dinámico (bueno para íconos y badges). damping 14–18 → settle suave (bueno para tarjetas y texto). damping 25+ → sin overshoot (bueno para layouts críticos).
⏱️ Secuenciación: orden en el tiempo, no todo a la vez
Cuando todo se anima a la vez, la vista no sabe dónde mirar. El stagger es la técnica de retrasar cada elemento un poco: la atención fluye naturalmente de arriba hacia abajo, de izquierda a derecha, de lo principal a lo secundario.
Cada barra entra con 0.3 s de retraso: la lectura fluye de arriba hacia abajo.
Identifica la jerarquía visual
Lo primero que se incluya debe ser lo más importante: título, hero, CTA.
Aplica un delay por índice
Cada elemento recibe frame - i * offset — simple y escalable.
Guarda el offset como constante
8 frames (a 30fps ≈ 266ms) es un buen punto de partida. Ajusta durante la conversación.
🥇 Regla de oro: empieza de forma sencilla
El texto que aparece como si se escribiera o con un fade es limpio y eficaz. Veinte elementos animándose juntos son un caos. La regla de oro: menos elementos animados = más impacto por elemento. La skill te ayuda a resistir la tentación de animarlo todo.
✗ Trampas comunes
- ✗Animar cada palabra por separado crea ansiedad visual.
- ✗Usar rotación + escala + traslación al mismo tiempo y sin propósito.
- ✗Efectos de partículas en el fondo que compiten con el contenido.
- ✗Animaciones que nunca se detienen: distraen del mensaje central.
✓ Principios que funcionan
- ✓Un elemento principal se anima; el resto aparece suavemente con fade.
- ✓El texto con efecto de máquina de escribir o fade-up siempre es legible y elegante.
- ✓Usa el movimiento para guiar la mirada, no para impresionar.
Prueba del músico
Un músico experimentado sabe que el silencio es tan importante como las notas. Un motion designer experimentado sabe que lo que no anima es tan importante como lo que anima. Pregunta: "¿Esta animación está al servicio del mensaje o es decoración?"
🔁 Itera a partir de ahí
La skill no es un botón mágico: es un acelerador de iteración. Empiezas con algo que funciona (aunque no sea perfecto), lo validas en el preview, pides ajustes en la misma conversación y llegas a un resultado profesional en pocos turnos.
Genera el esqueleto con spring predeterminado
Primer resultado: funciona, no es perfecto. Es intencional — una base para iterar.
Ajusta el damping y la stiffness en una conversación
"Es demasiado elástico, reduce el bounce" — Claude ajusta los parámetros sin reescribir todo.
Ajusta la secuencia
"El texto aparece demasiado pronto, delay de 12 frames" — la conversación acumula contexto y edita de forma precisa.
Renderiza y evalúa en el reproductor
El studio de Remotion reproduce en tiempo real — ves el resultado mientras conversas, no después de renderizar.