🎬 Escenario: startup, landing, 45 segundos
El producto es real: NoteAI, una app de notas que usa IA para organizar y resumir. El objetivo del video es convencer en 45s, desde el problema que siente el usuario hasta el CTA de descarga. No se puede desperdiciar ninguna escena.
¿Por qué GSAP para este proyecto?
GSAP es la única biblioteca de la ruta que tiene una timeline secuencial nativa. Pones 6 escenas en orden, defines offsets y GSAP garantiza que cada pieza entre en el momento adecuado. Para un video de storytelling con 6+ elementos en movimiento, esto es insustituible.
✓ GSAP es ideal cuando…
✗ GSAP no es la mejor opción cuando…
📝 Escenas 1–2: entra el titular, el subtítulo aparece con fundido
Las dos primeras escenas establecen la propuesta de valor. El headline sube desde abajo con spring: un ligero overshoot, como quien golpea la mesa con la mano. El subheading aparece con un fade-in limpio 0.8s después, dándole espacio al ojo para leer.
💡 Consejo de timing
Entre el headline y el subheading, usa un delay de 0.6–0.8s. Menos que eso, los dos elementos parecen entrar al mismo tiempo y se pierde la jerarquía. Más de 1.2s, el espectador piensa que el video se trabó.
🃏 Escenas 3–4: tarjetas en stagger y Dashboard
Tres tarjetas de funcionalidades entran en stagger de 0.15s cada una — no simultáneas ni una por vez: el ritmo adecuado que parece deliberado. Luego, el mockup del dashboard se desliza desde la derecha con ease-out, como una cortina que se abre.
Orden de construcción de las escenas
Montar la composición de Remotion
Crea la composición 1920×1080 a 30fps, 45s (1350 frames). Define la duración en calculateMetadata.
Agregar los elementos estáticos
Titular, subtítulo, tarjetas, dashboard — todavía sin animación. Valida el diseño y la tipografía.
Conectar GSAP al frame de Remotion
Usa useCurrentFrame + useEffect para avanzar el timeline de GSAP de forma determinista por fotograma.
Iterar el timing escena por escena
Ajusta el offset de cada elemento en la vista previa. Renderiza el MP4 solo después de aprobarla.
🔢 Escena 5: contador de estadísticas
El contador de estadísticas se anima desde cero hasta el valor real con interpolate(frame, [0, 60], [0, 10000]). Es uno de los momentos más persuasivos del video: prueba social en movimiento.
💡 Consejo de persuasión
Los números que suben activan el cerebro de manera distinta a los números estáticos. Usa easing power2.out — rápido al principio, lento al final, para que el número "aterrice" suavemente en el valor correcto, como si se estuviera asentando.
💬 El prompt completo
Este es el prompt literal que le das a Claude Code (con la skill Remotion activa). Cada línea de instrucción corresponde a una escena del video: Claude genera la composición completa en una sola respuesta.
Create a SaaS launch video for an AI note-taking application. Sequence: 1. Headline enters from below. 2. Subheading fades in. 3. Three feature cards stagger onto screen. 4. Dashboard mockup slides in. 5. Statistics counter animates upward. 6. CTA button scales in. Use spring easing and professional pacing.
💡 ¿Por qué enumerar?
La lista numerada se asigna directamente a la estructura de secuencia de GSAP. Claude recibe una instrucción explícita sobre el orden y la traduce a .to() e .from() en el orden correcto, sin adivinar.
🚀 Montaje final y entregable
Con las escenas aprobadas en la vista previa, el render final genera el MP4 listo para distribuir. Un video, tres destinos simultáneos: Product Hunt, landing page y pitch deck.
✓ Lo que ofrece este video
✗ Lo que NO está dentro del alcance
Lo que aprendiste en este proyecto
- ▸ Línea de tiempo de GSAP para secuenciar animaciones con precisión
- ▸ Apariciones escalonadas para transformar grupos en una narrativa
- ▸ Jerarquía de Motion: qué lidera y qué acompaña
- ▸ Counter animado como herramienta de persuasión
- ▸ Narrativa en video al estilo de una presentación
📋 Resumen del Módulo 3.1
- ✓GSAP es la opción adecuada para coreografías de varios elementos en secuencia
- ✓El titular + el subtítulo establecen la jerarquía visual en las primeras escenas
- ✓El stagger de tarjetas crea ritmo sin parecer mecánico
- ✓Counter animado = prueba social en movimiento = más persuasión
- ✓Entregable: video de lanzamiento listo para Product Hunt y pitch deck
Siguiente módulo:
🌍 Módulo 3.2 — World Population Shift (D3) →