La matriz de las 4 bibliotecas
Cada biblioteca tiene un dominio claro. No existe una «mejor lib»: existe la lib adecuada para cada tipo de motion. La matriz de abajo es el principal mapa de decisión del curso.
Cada lib aparece en stagger, como en un video de producto generado con el propio curso.
| Lib | Ideal para | Casos de uso | Evitar cuando |
|---|---|---|---|
| GSAP | Coreografía determinista | Introducciones a SaaS, videos de lanzamiento | UI reactiva / física |
| Framer Motion | UI física y reactiva | Interfaces, spring | Coreografía de video |
| D3 | Datos animados | Gráficos, dashboards, mapas | 3D, motion puro |
| Three.js / R3F | Escenas 3D | Producto, brand, arquitectura | Motion 2D simple |
| Lottie | Ligero y rápido | Clips para redes sociales, microcontenido | Coreografía compleja |
GSAP × Framer, recordatorio
La distinción más importante del curso, para recordar: GSAP para video (timeline determinista, coreografía fija, lo que ocurre en el frame X está definido); Framer Motion para UI (spring, física, reactivo al estado de la aplicación). No son competidores: son ámbitos diferentes.
⚡ Usa GSAP cuando:
- →Estás produciendo un video renderizado
- →La coreografía es fija y la defines tú
- →Necesitas sincronización precisa con el audio
- →Introducción a SaaS, video de lanzamiento, presentación
🌊 Usa Framer cuando:
- →Estás animando una interfaz de usuario
- →La animación responde al estado (hover, click)
- →Quieres spring y física natural
- →Componentes interactivos de React
Vanilla Three.js × R3F, un repaso
La misma lógica de la distinción anterior: Vanilla Three.js para escenas 3D simples, sin dependencia de React. React Three Fiber (R3F) cuando la escena 3D necesita componerse con otros elementos React — estado, UI y animaciones de Framer en el mismo componente.
Vanilla Three.js — cuándo usarlo
Escena 3D aislada, sin composición con la UI de React. Prompt para Claude: "crea una escena de Three.js con [descripción], sin React". Resultado: menos boilerplate, código más directo.
React Three Fiber — cuándo usarlo
Cuando el componente 3D necesita props, estado de React o estar dentro de una composición más grande. La sobrecarga de R3F compensa cuando se integra con el resto de la app.
💡 Regla práctica
Si tu escena 3D vivirá dentro de un componente React y necesita comunicarse con él, usa R3F. Si es una escena independiente en un canvas separado, usa Vanilla. Si tienes dudas, empieza con Vanilla y migra a R3F si necesitas la integración.
Las 4 reglas universales
Independientemente de la biblioteca, del tipo de video o del nivel de complejidad — estas 4 reglas siempre se aplican. Son el denominador común de todos los proyectos del curso.
Instala la skill
Sin la skill Remotion, Claude produce motion genérico. Con la skill, conoce las convenciones y las API específicas. Es la diferencia entre un resultado promedio y uno correcto desde el primer intento.
Empieza de forma sencilla
Primero el esqueleto. Composición antes que tiempos. Tiempos antes que movimiento expresivo. Movimiento antes que pulido. El orden importa, y cada etapa debe aprobarse antes de avanzar.
Itera en la misma sesión
El contexto acumulado en la sesión es el activo más valioso. No abras una sesión nueva a mitad del flujo: perderás todo el código y el historial que Claude ya tiene en memoria.
Renderiza con la configuración correcta
ProRes 4444 XQ + PNG + última opción para alpha. H.264 para distribución. Conoce el destino del video antes de renderizarlo — la configuración depende de dónde terminará el video.
Es producción ahora / prácticamente gratis
Claude Code + Remotion no es un prototipo, no es un experimento — es herramienta de producción real, hoy. Y cada video producido con este stack cuesta una fracción de centavo en tokens. El costo de experimentación es prácticamente cero.
🚀 Por qué ahora está listo para producción
- ✓Claude Code con la skill Remotion genera código funcional en el primer intento
- ✓Remotion renderiza con calidad de transmisión (4K, ProRes)
- ✓El flujo de esqueleto → pulido está validado en cientos de videos
- ✓La calidad escala según tu enfoque, no según el presupuesto
💰 Prácticamente gratis
- ✓Una sesión de 4 turns cuesta centavos en tokens
- ✓Remotion es de código abierto — sin costo de licencia
- ✓Node.js se ejecuta localmente — sin costo de renderizado
- ✓Puedes iterar 50 veces por menos de lo que cuesta un café
Próximos pasos
Terminaste el curso. ¿Qué hacer ahora para transformar lo aprendido en fluidez real? Tres acciones concretas con resultados inmediatos.
Árbol de decisión completo: nunca vuelvas a equivocarte de biblioteca.
Practica los 4 proyectos de la Trilha 3
Introducción a SaaS (GSAP), visualización de datos (D3), escena 3D (Three.js/R3F) y clip para redes sociales (Lottie). Cada uno aplica el flujo de 4 turns a una situación real. La fluidez viene de la práctica, no de la lectura.
Explora la documentación oficial de cada lib
Documentación de GSAP, galería de D3, Three.js Journey, documentación de React Three Fiber. Claude ya sabe cómo usarlas, pero tú tienes que saber qué pedir. Conocer el catálogo de la biblioteca es saber qué es posible.
Crea tu primer video de producción
No para aprender, sino para entregar. Un video real, con un destino real (YouTube, reel, presentación). El primer video de producción es lo que convierte el curso de aprendizaje en una habilidad.
🎓 Curso completado
Recorriste las cuatro rutas. Esto es lo que ahora sabes hacer:
Claude Code + Remotion ya es una herramienta de producción. La calidad escala con tu enfoque. Y cada combinación es prácticamente gratis.