Mapa de la ruta
Seis módulos que cubren cada biblioteca en profundidad: haz clic para ir directamente.
Contenido detallado
🟢 GSAP — timeline perfecto a nivel de frame
La biblioteca estándar de animación web. Coreografía de timelines, stagger y easing profesional para videos estilo slide-deck.
Qué es: GreenSock Animation Platform — la biblioteca JavaScript más usada para animación web de alto rendimiento.
Por qué aprender: Control preciso del tiempo, easing profesional e integración natural con Remotion.
Conceptos clave: gsap.to(), gsap.from(), timeline, stagger, ease.
Qué es: Encadenamiento de animaciones en el que cada pieza entra en el momento exacto.
Por qué aprender: Es la base para videos estilo presentación donde cada sección aparece en secuencia.
Conceptos clave: timeline.to(), position param, overlap con "<0.3", labels.
Qué es: Animaciones que se activan en cascada con delays controlados.
Por qué aprender: Las tarjetas que entran en secuencia son el patrón de los mejores videos de producto.
Conceptos clave: stagger: 0.1, from: "center", each, amount.
Qué es: La curva de velocidad que hace que la animación parezca física o suave.
Por qué aprender: Linear parece robótico; ease-out parece natural. La elección define el tono.
Conceptos clave: power1-4, back, elastic, bounce, CustomEase.
Qué es: Usar GSAP para coreografiar elementos React renderizados frame a frame por Remotion.
Por qué aprender: Remotion renderiza cada frame — GSAP traduce «progreso» a valores CSS a la perfección.
Conceptos clave: useCurrentFrame, interpolate, gsap.globalTimeline.
Qué es: El enfoque de pedirle a Claude una landing page estática y luego transformarla en una animación GSAP.
Por qué aprender: Reutilizar componentes listos acelera mucho la producción de video.
Conceptos clave: prompt de transformación, separación de concerns, capas de animación.
⚖️ GSAP × Framer Motion
Control preciso de timeline frente a física reactiva. Por qué GSAP gana para video renderizado.
Qué es: Animaciones controladas por tiempo absoluto: siempre iguales en cualquier render.
Por qué aprender: El renderizado cuadro a cuadro exige determinismo: el mismo cuadro = el mismo aspecto visual.
Conceptos clave: timeline determinista, position param, seek(), globalTimeline.
Qué es: Animaciones dirigidas por interacción: hover, drag, reflow del layout.
Por qué aprender: Ideal para prototipos de UI y demos interactivas (no para video renderizado).
Conceptos clave: motion.div, whileHover, spring physics, AnimatePresence.
Qué es: Tabla comparativa para decidir qué biblioteca usar según el escenario.
Por qué aprender: Evita usar la herramienta equivocada en el contexto equivocado.
Conceptos clave: video renderizado, prototipado, UI interactiva, presentación.
Qué es: A termina, B comienza 0.3s después y C se superpone a B en 0.1s.
Por qué aprender: Este patrón de posicionamiento relativo es el corazón del storytelling visual.
Conceptos clave: parámetro de posición "<", "<0.3", "+0.5", etiquetas con nombre.
Qué es: Video renderizado = nadie va a interactuar. Hover y drag no existen en el MP4.
Por qué aprender: Entender la limitación evita elegir mal el stack.
Conceptos clave: renderizado headless, frame por frame, ausencia de interactividad.
Qué es: Prototipos de UI, demos interactivas para el cliente, apps web con transiciones.
Por qué aprender: Tener ambas herramientas en tu arsenal resuelve contextos diferentes.
Conceptos clave: prototipado rápido, animación de layout, transiciones de layout compartido.
📊 D3.js — el dato es el contenido
Estándar de visualización de datos. Los datos estáticos se convierten en animaciones ricas: tú no dibujas nada, los datos hacen el trabajo.
Qué es: Data-Driven Documents: vincula datos a elementos DOM/SVG automáticamente.
Por qué aprender: Cualquier conjunto de datos se convierte en un gráfico animado sin dibujarlo manualmente.
Conceptos clave: data binding, scales, selections, enter/update/exit.
Qué es: Barras que crecen y se reordenan a lo largo del tiempo para representar rankings en movimiento.
Por qué aprender: Es el patrón para cualquier comparación temporal de categorías.
Conceptos clave: keyframes de reordenamiento, transiciones fluidas, d3.transition().
Qué es: Los nodos aparecen en secuencia y las líneas se dibujan conectando la topología.
Por qué aprender: Explica sistemas complejos de forma visual y progresiva.
Conceptos clave: force layout, stroke-dashoffset, sequential reveal, node-link.
Qué es: El enfoque: tú proporcionas el dataset y describes el aspecto visual; Claude genera D3 completo.
Por qué aprender: No necesitas saber D3; necesitas saber qué quieres mostrar.
Conceptos clave: prompt de datos, CSV/JSON, especificación visual, iteración.
Qué es: Rutas de crecimiento, mapas de calor de datos geográficos, recorridos de usuario.
Por qué aprender: Los datos geográficos cuentan historias únicas que los gráficos comunes no pueden contar.
Conceptos clave: d3.geoProjection, topojson, choropleth, path animation.
Qué es: Gráficos, diagramas de arquitectura, mapas de rutas — cualquier cosa basada en datos.
Por qué aprender: Saber qué herramienta elegir para cada tipo de datos ahorra retrabajo.
Conceptos clave: elección del tipo de gráfico, datos continuos vs. categorías, jerarquías.
🧊 Three.js — WebGL y 3D en video
Escenas 3D renderizadas fotograma a fotograma. Materiales, cámaras y geometría procedural para motion graphics 3D.
Qué es: Integración de Three.js con Remotion: cada frame del video es un render WebGL sincronizado con el tiempo de la composición.
Por qué aprender: Permite crear gráficos en movimiento con geometría, luz y profundidad imposibles de replicar con CSS o SVG.
Conceptos clave: useCurrentFrame(), renderer.render(), canvas como fuente de imagen, determinismo de frame.
Qué es: Uso de Three.js puro — Scene, Camera, Renderer, Mesh — sin capas de abstracción adicionales.
Por qué aprender: Control total sobre el pipeline WebGL; ideal cuando se necesita el máximo rendimiento o shaders personalizados.
Conceptos clave: WebGLRenderer, PerspectiveCamera, BoxGeometry, MeshStandardMaterial, animationLoop sustituido por frame.
Qué es: Wrapper de React para Three.js — escribe escenas 3D en JSX, con componentes reutilizables y hooks.
Por qué aprender: Se integra de forma natural con el modelo de componentes de Remotion; el código es más legible y fácil de iterar con Claude.
Conceptos clave: <Canvas>, <mesh>, <ambientLight>, useFrame() sustituido por useCurrentFrame(), auxiliares de drei.
Qué es: Configuración de luces (ambiental, direccional, puntual) y materiales (básico, estándar, físico) para definir la apariencia y el realismo.
Por qué aprender: La iluminación es lo que transforma un cubo genérico en un objeto con identidad visual — esencial para motion premium.
Conceptos clave: AmbientLight, DirectionalLight, MeshPhysicalMaterial, roughness, metalness, envMap.
Qué es: Movimiento de cámara alrededor de objetos usando trigonometría o easing mapeado a frames.
Por qué aprender: La cámara en movimiento crea profundidad narrativa — transforma renders estáticos en cinematografía 3D.
Conceptos clave: camera.position, lookAt(), Math.sin/cos para la órbita, interpolación de posición con spring().
Qué es: Criterios objetivos para elegir entre Three.js puro y React Three Fiber en cada proyecto.
Por qué aprender: La elección correcta ahorra retrabajo: R3F es mejor para composiciones complejas; Vanilla, para shaders y rendimiento crítico.
Conceptos clave: overhead de reconciliación, ecosistema drei, acceso directo a la GPU, integración con el estado de React.
✨ Lottie — animación en JSON
Exportar desde After Effects / Figma a JSON y reproducir con perfección en cualquier tamaño.
Qué es: Lottie como la ruta más directa para tener una animación lista para video: archivo JSON → componente Remotion → render.
Por qué aprender: Elimina el código de animación manual: describes el aspecto visual, obtienes un JSON y lo insertas en el video en minutos.
Conceptos clave: lottie-web, @remotion/lottie, LottieAnimation component, loop y autoplay controlados por frame.
Qué es: Principio según el cual las animaciones Lottie de alcance limitado (ícono, loader, ilustración simple) generan JSON confiable y ligero.
Por qué aprender: Las animaciones complejas generan JSON frágil; dividirlas en piezas pequeñas garantiza una calidad constante.
Conceptos clave: descomposición de escenas, tamaño del archivo JSON, capas con nombre, versionado de animaciones.
Qué es: LottieFiles y otras fuentes de animaciones JSON listas para usar, gratuitas y con licencia para uso en producción.
Por qué aprender: Reutilizar animaciones validadas acelera la producción: no necesitas crear desde cero lo que ya existe.
Conceptos clave: lottiefiles.com, filtro de licencia, vista previa, descarga JSON, personalización de colores mediante el editor en línea.
Qué es: Uso de Lottie para pequeñas animaciones de refuerzo — marcas de verificación, loaders, íconos que "cobran vida" en momentos clave del video.
Por qué aprender: Las microinteracciones elevan la percepción de calidad sin un costo de producción proporcional.
Conceptos clave: timing de entrada, playbackRate, segmentos de animación, sincronización con narración.
Qué es: Lottie como opción predeterminada para secuencias de onboarding: ilustraciones animadas que explican flujos de apps.
Por qué aprender: Formato ligero, escalable y perfectamente reproducible en cualquier resolución: ideal para videos de producto.
Conceptos clave: storyboard de onboarding, transiciones entre pantallas, duración por paso, integración con subtítulos.
Qué es: Lottie para animaciones de identidad de marca en redes sociales: logos animados, intros, bumpers y transiciones.
Por qué aprender: Producción de contenido de marca a escala — una animación Lottie reutilizada en decenas de videos mantiene la identidad sin rehacer el trabajo.
Conceptos clave: paleta de marca en JSON, animaciones reutilizables como componentes, variantes de color para distintas campañas.
🗺️ Mapa de decisión — qué biblioteca usar
Diagrama de flujo completo para elegir la biblioteca adecuada según el tipo de contenido, el plazo y la complejidad.
Qué es: Criterio para elegir GSAP: cualquier escena donde múltiples elementos deban entrar en secuencia con timing preciso.
Por qué aprender: Saber cuándo elegir GSAP evita usar una biblioteca más pesada cuando una timeline lo resolvería.
Conceptos clave: slide-deck, reveal secuencial, stagger, easing expresivo, compatibilidad total con Remotion.
Qué es: Criterio para elegir D3: siempre que el contenido se derive de un dataset — el dato es el protagonista.
Por qué aprender: D3 convierte números en geometría automáticamente; intentar hacerlo manualmente con otra biblioteca sería ineficiente.
Conceptos clave: data binding, scales, gráficos animados, diagramas de red, mapas geográficos.
Qué es: Criterio para elegir Three.js: cualquier escena que requiera profundidad real, geometría procedural o renderizado de luz física.
Por qué aprender: Three.js tiene un costo de configuración más alto; usarlo solo cuando el 3D sea realmente necesario evita complejidad innecesaria.
Conceptos clave: objetos 3D, cámara con perspectiva, shader, materiales PBR, escenas interactivas o cinematográficas.
Qué es: Criterio para elegir Lottie: animaciones de ilustración, íconos, microinteracciones — donde la ligereza y la velocidad de entrega importan más que el control.
Por qué aprender: Lottie elimina el código de animación: entregas más rápido y con menos errores cuando el alcance encaja.
Conceptos clave: JSON preanimado, cero código de interpolación, escalable, onboarding y clips para redes sociales.
Qué es: Comparación directa entre GSAP (control imperativo de la timeline) y Framer Motion (animación declarativa orientada al estado de React).
Por qué aprender: Ambas son válidas en Remotion: elegir la incorrecta genera trabajo extra; entender las diferencias ahorra tiempo.
Conceptos clave: GSAP para coreografías precisas, Framer Motion para prototipado e interfaces interactivas; sus ámbitos de uso se superponen.
Qué es: Framework de decisión con 4 reglas: instala la biblioteca adecuada, empieza de forma sencilla, itera con Claude, renderiza correctamente.
Por qué aprender: Tener un proceso de decisión explícito elimina la parálisis al elegir y garantiza consistencia entre proyectos.
Conceptos clave: criterio de instalación, MVP primero, ciclo de iteración con IA, validación del render antes de escalar.