Mapa de la ruta
Contenido detallado
📒 SaaS Walkthrough (GSAP)
Una startup lanza una app de notas con IA: un video de 45s de la landing muestra Problema → Solución → Features → CTA. GSAP coordina la coreografía de la timeline como un director de arte.
Video de lanzamiento de SaaS de 45s: titular → subtítulo → funciones con entrada escalonada → dashboard → estadísticas → CTA. GSAP brilla en coreografías con muchos elementos.
Entender el encaje entre la librería y el proyecto ahorra retrabajo; GSAP es storytelling mediante el movimiento.
timeline GSAP · secuencia narrativa · jerarquía de movimiento.
El titular sube desde abajo con spring; el subtítulo aparece con fade-in y un delay adecuado. Son los anclajes de la jerarquía visual.
Las primeras escenas determinan el tono emocional de todo el video.
fromBelow · spring easing · desplazamiento del retardo.
Tres tarjetas de funcionalidades entran en stagger (~0.15s entre cada una); el mockup del dashboard se desliza desde la derecha. El ritmo stagger es la firma visual de GSAP.
Stagger transforma elementos iguales en una secuencia con personalidad.
gsap.stagger · slideInRight · revelación secuencial.
Los números se animan desde cero hasta el valor real con easing power2. El conteo ascendente de «10,000 usuarios» genera credibilidad visualmente.
Los counters animados son comprobablemente más persuasivos que los números estáticos.
counter animation · interpolateValue · power2.out.
El botón CTA escala de 0.8 a 1 con un ligero overshoot, captando la atención después del clímax de las estadísticas.
El CTA es la única acción que el video busca del espectador — el movimiento debe subrayarlo.
scale pop · back.out · puntuación de movimiento.
Composición final: 6 escenas en sequence, render 1920×1080, MP4 para Product Hunt, pitch deck y landing page.
Saber cuál es el destino final define la resolución, la duración y el códec desde el primer prompt.
render · composición final · distribución.
🌍 World Population Shift (D3)
Bar race animado que muestra los 10 países más poblados de 1990 a 2030. D3 transforma una hoja de cálculo en un documental: cada reordenamiento de barras cuenta una historia.
Documental sobre el crecimiento poblacional de 1990–2030. Sin D3 tienes números; con D3 tienes una historia que se desarrolla en el tiempo.
D3 es la única biblioteca de la lista nativa para escalas, ejes y transiciones de datos.
data storytelling · scale linear · axis dinámico.
Conjunto de datos de país × año × población. La escala lineal asigna valores a píxeles; la escala de bandas distribuye las barras con un espacio uniforme.
Una escala incorrecta = barras que se desbordan o desaparecen. Es la base.
scaleLinear · scaleBand · domain/range.
En cada frame de Remotion, se vuelve a calcular el ranking. Las barras interpolan suavemente su posición Y y su ancho; los cambios de liderazgo se marcan con una breve pausa.
La transición de ranking es el momento dramático del bar race: es donde reacciona el espectador.
sort dinámico · interpolación de posición · pausa dramática.
Las etiquetas de país y valor siguen las barras. El contador de año en la esquina muestra 1990 → 2030 en tiempo real, anclado al frame de Remotion.
Las etiquetas que se «pegan» a las barras son lo que hace que la carrera de barras sea legible a alta velocidad.
text follow · year counter · readability motion.
Mapa de color persistente por país (el mismo color independientemente del ranking). Fondo oscuro, barras con un gradiente del color del país a un tono más claro.
La consistencia del color es lo que permite que el espectador siga un país durante todo el video.
colorMap · identidad persistente · estética documental.
El mismo componente bar race, cambiando solo el conjunto de datos, se convierte en una infografía de ingresos, un ranking de equipos o de aprobación presidencial.
Una plantilla bien parametrizada se amortiza en decenas de videos.
componente genérico · props del dataset · multiplicación del contenido.
🏍️ Motorcycle Commercial (Three.js)
Showcase cinematográfico: la cámara orbita mientras las luces se reflejan en la carrocería metálica. Nada más de la lista crea escenas 3D convincentes: Three.js es la opción obvia.
Anuncio automotriz premium: cámara en órbita, luces de estudio, reflejo metálico, fondo oscuro. Ninguna otra biblioteca genera aquí 3D renderizado.
Elegir la herramienta adecuada para el trabajo adecuado es la meta-habilidad más valiosa de cualquier proyecto.
scene · camera · renderer · WebGL.
La luz principal, la luz de relleno y la luz de contorno simulan un estudio fotográfico. PointLight y SpotLight con intensidad calibrada revelan la forma del objeto.
La iluminación distingue una escena amateur de un producto premium más que cualquier mesh.
three-point lighting · PointLight · rim light.
MeshStandardMaterial con metalness=0.9 y roughness=0.1. Un EnvMap cúbico simula el reflejo del entorno: el «brillo de concesionaria».
El material adecuado transforma un cubo en un producto deseable.
metalness · roughness · envMap.
La cámara se mueve en arco alrededor del objeto mediante Math.sin/cos del frame actual. Movimiento lento y deliberado, como una cámara de cine de alta gama.
El movimiento de cámara es donde el espectador siente el carácter de la marca.
camera orbit · sin/cos path · dramatic pacing.
Suelo con un plano reflectante sutil, fondo #0a0a0a, niebla exponencial que oscurece los bordes. Principios de composición de fotografía de producto aplicados al 3D.
La composición guía la mirada incluso sin movimiento.
FogExp2 · plano reflectante · encuadre.
Renderizado en 4K con antialias; salida MP4 para Instagram, YouTube y medios out-of-home. El resultado parece marketing automotriz profesional.
Saber hasta dónde llega el stack define lo que puedes vender.
antialias · render 4K · producto premium.
🏦 Banking Onboarding (Lottie)
Una fintech necesita animaciones de onboarding: crear cuenta → depositar → transferir → confirmar. Lottie ofrece un alcance reducido, rapidez y una confiabilidad excepcional: la opción correcta.
Cuatro microanimaciones de onboarding móvil. Lottie = JSON ligero, escalable infinitamente, funciona en React Native sin recompilar.
Para el alcance de una microinteracción, Lottie es más rápido y confiable que cualquier biblioteca de animación programática.
Animación JSON · vectorial · multiplataforma.
El logo de la app escala desde el centro, el fondo pasa de oscuro a blanco y los elementos de la UI aparecen en una cascada suave.
La pantalla de inicio es la primera impresión emocional del producto.
revelación del logo · cascada de UI · momento de marca.
Un ícono de moneda cae y aterriza en la billetera; una flecha de transferencia recorre el camino de A a B. Ambas usan animación de trayectoria de Lottie.
Las animaciones de trayectoria son el punto fuerte de Lottie: fluidez de SVG en tiempo de ejecución.
animación de trayectoria · seguir una trayectoria · UX de transacciones.
El círculo verde se dibuja mediante stroke-dashoffset; la marca de verificación aparece dentro; un ligero rebote final. El cierre emocional de la secuencia.
La confirmación de éxito es el momento en que el usuario decide si confía en la app.
stroke-dashoffset · reveal · estado de éxito UX.
El hook useLottie con currentFrame de Remotion garantiza que la animación JSON avance exactamente en el frame correcto del render.
Sin sincronización de frames, el render queda desincronizado entre la vista previa y el MP4 final.
sincronización de frames · useLottie · renderizado determinista.
Cuatro JSON exportados + componente React reutilizable. Puede integrarse en React Native o en una aplicación web sin modificar el código.
Lottie es el único formato de animación que pasa del prototipo a la app de producción sin fricción.
Exportación JSON · React Native · listo para producción.