Mapa de la ruta
Contenido detallado
🎯 Trucos de producción
Dos trucos profesionales: motion path mediante imagen y render con el canal alpha correcto.
Dos problemas comunes resueltos con un enfoque visual: control de trayectoria y render con transparencia.
Dibuja la línea deseada en papel o en una app sencilla, guárdala como imagen y entrégasela a Claude. Extrae el path y genera la animación.
El lenguaje es ambiguo para describir formas. «Curva suave hacia la derecha» genera resultados impredecibles; una imagen elimina la ambigüedad.
Title cards, lower thirds y overlays que se compondrán sobre footage existente — siempre que el fondo de Remotion no sea el fondo final.
Tres campos en el panel de render de Remotion. Sin estas configuraciones, el canal alpha se aplana y pierdes la transparencia.
Alpha aplanado, imagen confusa para el path, códec incorrecto: los tres errores más frecuentes al producir con transparencia.
🔁 Iteración que mejora la calidad
Los mejores resultados de Remotion no salen del primer prompt: son esqueletos que se refinan 3-4 veces en la misma conversación.
Pide solo la estructura: elementos en el lugar correcto, sin tiempos refinados. Valida la composición antes de cualquier refinamiento.
Con la estructura aprobada, agrega duraciones, easing y la secuencia de entrada y salida. Aún en la misma sesión: Claude recuerda el contexto.
Con el timing aprobado, enfócate en los detalles: overshoot, spring y stagger entre elementos. Aquí nace el movimiento expresivo.
Colores, tipografía, gradiente, sombra. El polish es lo que transforma "funciona" en "impresiona". Solo tiene sentido cuando el movimiento ya está bien.
Un único prompt largo rara vez supera a 4 prompts incrementales. Empieza siempre por lo mínimo viable y construye sobre lo aprobado.
Claude recuerda todo el código de la sesión. En cada turno parte de lo aprobado — no empieza de cero. La calidad es acumulativa, no se reemplaza.
🗺️ Recapitulación y mapa final
Todo repasado: la matriz de las bibliotecas, las 4 reglas universales y por qué esto es producción ahora.
GSAP = coreografía fija; D3 = datos animados; Three.js = 3D; Lottie = ligero/rápido. Cada una tiene un ámbito claro.
GSAP para video y coreografía determinista; Framer Motion para interfaces reactivas y físicas. No son competidores: pertenecen a ámbitos diferentes.
Vanilla Three.js para escenas 3D simples; React Three Fiber (R3F) cuando la escena necesita componerse con otros componentes de React.
Instala la skill, empieza con algo sencillo, itera en la misma sesión y renderiza con la configuración correcta. Aplica a cualquier lib y cualquier proyecto.
Claude Code + Remotion no es un prototipo — es una herramienta de producción real. Y cada combinación cuesta centavos. La calidad escala con tu enfoque.
Practica los 4 proyectos de la Trilha 3, explora la documentación oficial de cada lib y construye tu primer video de producción.