Cada turno agrega una capa. El turn 1 nunca tiene que ser perfecto: tiene que funcionar.
🦴 Primero el esqueleto (turn 1, sin perfección)
El objetivo del turn 1 es simple: hacer que el componente renderice. Nada de timing preciso, nada de spring, nada de colores perfectos. Solo quieres ver algo en pantalla para confirmar que la estructura tiene sentido.
¿Por qué pedirlo sin animación primero?
Separar la estructura del movimiento permite identificar problemas de diseño antes de definir cualquier timing. Si la tarjeta tiene el tamaño equivocado, prefieres descubrirlo en el turno 1 antes que después de ajustar el spring durante media hora.
✗ Error común en el turn 1
- ✗Pedir el layout + animación + colores + responsividad todo de una vez.
- ✗Describir la animación final antes de validar la estructura.
- ✗Exigir perfección en la primera respuesta y rendirse si no la obtienes.
✓ Turn 1 bien hecho
- ✓El componente se renderiza sin errores en Studio.
- ✓La estructura de los elementos tiene sentido visualmente.
- ✓Puedes describir lo que quieres cambiar en el turn 2.
⏱️ Agrega timing (turn 2)
Con la estructura validada, el turn 2 define la duración y ritmo. Cuándo entra cada elemento, cuánto tiempo permanece visible y cuándo sale. Todavía sin spring: usa interpolate() o un fade simple.
Define los FPS y la duración total
30fps es el estándar seguro. Duración en frames: 3s = 90 frames, 5s = 150 frames. Déjalo explícito.
Usa intervalos de frame, no segundos
Remotion trabaja con frames. «Aparece en 0.5s» se convierte en «frame 15 a 30fps». Pensar en frames te da un control preciso.
interpolate() es tu aliado aquí
interpolate(frame, [0,20], [0,1]) es un mapeo lineal simple y predecible — perfecto para validar el timing antes de agregar spring.
🎨 Refina el movimiento (turn 3, easing y spring)
Con el timing validado, el turn 3 reemplaza el interpolate lineal por spring physics. Ahora tienes una base para pedir parámetros específicos, porque ya sabes que la estructura y el ritmo son correctos.
Cada turno eleva la calidad de forma incremental: sin reescrituras, solo refinamiento.
¿Cuándo agregar spring y cuándo mantener interpolate?
Usa spring() para elementos que entran en escena o cambian de estado. Usa interpolate() para valores que necesitan un control lineal exacto — como el progreso de una barra o un fade de salida.
🧠 El contexto se acumula — en la misma sesión, la calidad se compone
Claude no olvida. Cada turno en la misma sesión acumula contexto: sabe el nombre de los componentes, los parámetros ya definidos, lo que aprobaste y lo que pediste cambiar. Nunca reinicies una sesión a mitad de una animación.
La misma sesión. La tarjeta v4 se construyó sobre la v1 — sin reescribir, sin perder contexto.
✗ Pérdida de contexto
- ✗Abrir una ventana nueva a mitad del flujo: contexto en cero.
- ✗Copiar el código a un chat nuevo para "hacerlo más rápido".
- ✗Repetir información que Claude ya sabe desperdicia tokens.
✓ Buenas prácticas de sesión
- ✓Mantiene la misma sesión de principio a fin del componente.
- ✓Hace referencia a los elementos por el nombre que les diste: "el HeroCard", "el título animado".
- ✓Al retomar una sesión antigua, recapitula el estado en 2 líneas.
📋 Describe la secuencia en una lista numerada
Para animaciones con más de un elemento o escena, escribe la secuencia como lista numerada de eventos. Esto elimina la ambigüedad y Claude puede asignar cada elemento a un intervalo de fotogramas.
Superposición intencional de frames
Observa que el logo comienza en el frame 15 mientras el background todavía está apareciendo (hasta el frame 20). Esta superposición de 5 frames crea fluidez: que todo aparezca al mismo tiempo sería rígido, y que todo aparezca en secuencia sería lento.
La numeración define la prioridad visual
El elemento 1 de la lista es el más importante: fondo, contenedor, hero. Los elementos posteriores son complementarios.
Especifica el intervalo de frames
Decir «después del logo» es ambiguo. Decir «frame 35–55» es determinístico y editable en el siguiente turno.
Menciona el tipo de movimiento por elemento
"spring", "slide-up", "fade", "bounce" — Claude usa estos términos para elegir la API correcta.
🎯 Jerarquía del movimiento — el principal lidera, el resto apoya
Toda escena tiene un elemento principal que lleva el mensaje — se anima con la mayor intensidad (spring, scale, slide). Los demás elementos son de apoyo: aparecen suavemente, se quedan quietos y salen primero. Invierte esto y la escena se convierte en caos.
✗ Sin jerarquía
- ✗El fondo se anima con un spring tan intenso como el título.
- ✗Los íconos de soporte rebotan y llaman más la atención que el texto.
- ✗Todo aparece al mismo tiempo: el espectador no sabe dónde mirar.
✓ Con jerarquía clara
- ✓Fondo: fade simple, aparece primero, sin overshoot.
- ✓Título principal: spring con overshoot — es el protagonista de la escena.
- ✓Elementos de apoyo: deslizamiento suave con damping alto, entran después.
Cómo describir la jerarquía para Claude
Basta con nombrar el rol: "El título es el elemento principal — spring con overshoot. Los íconos son elementos de apoyo — fade simple, aparecen 10 frames después." Claude usa esto para calibrar el damping, el delay y el tipo de animación de cada elemento.
📋 Resumen del módulo
Concluiste la Trilha 1 — Fundamentos. Estás listo para avanzar a las bibliotecas.
🎉 ¡Tramo 1 completado!
Dominas el modelo mental: stack, skill, física de spring y diálogo iterativo. En la Trilha 2, aprendes las bibliotecas de animación que desbloquean efectos avanzados — GSAP, Framer Motion y Lottie dentro de Remotion.