🧩 Snippets de Animaciones 3D en la Web

Compara un triángulo dibujado con WebGL puro frente a una pieza equivalente en Three.js para fijar qué parte pertenece a la GPU y qué parte resuelve la librería.

Explora una microinteracción donde el botón persigue el cursor con inercia suave y refuerza la sensación de objeto reactivo sin romper la legibilidad del CTA.

Observa cómo una pieza tipográfica puede cambiar mensaje, ritmo y tono visual usando GSAP como director temporal y no como simple efecto decorativo.

Explora varios ejemplos prácticos de integración entre GSAP y Three.js, incluyendo animaciones de texto, partículas, scroll y más.

Cambia entre geometrías 3D y observa cómo GSAP coordina salida, entrada elástica y giro continuo de una malla dentro de una escena Three.js.

Esta demo amplia enseña un patrón muy útil para landings 3D: una narrativa scroll-driven con barra de progreso, bloques que entran por fases y jerarquía visual clara.

Aquí el scroll no mueve una cámara, pero sí dirige el tiempo de revelado. Es un buen patrón para secciones técnicas, circuitos visuales o storytelling de producto entre capítulos 3D.

Ejemplo práctico de ScrollTrigger básico con tarjetas que se animan al entrar en viewport, mostrando la integración con GSAP.

Explora una escena donde la cámara, la rotación y la sustitución de formas trabajan juntas para crear una lectura orbital clara en lugar de un giro caótico.

Esta pieza enseña muy bien cuándo una nube de partículas aporta atmósfera y cuándo empieza a competir con el foco principal. Fíjate en la relación entre densidad, color y control.

Esta demo reúne las seis piezas del curso en una sola experiencia para que puedas comparar funciones, ritmos y tipos de protagonismo antes de pasar al proyecto final.

Una landing de portfolio completa donde Three.js aporta atmósfera de fondo y GSAP dirige entradas, scroll reveal y contadores.