YOU'RE NOT LOOKING AT AN IMAGE
ENTER
THE SYSTEM
SCROLL TO INITIALIZE ↓
HTML
Antes de que exista una interfaz, tiene que existir una estructura.
CSS
La estructura empieza a tener forma, jerarquía y personalidad.
JAVASCRIPT
La interfaz deja de ser estática. Empieza a reaccionar.
WORDPRESS
Contenido, datos y herramientas conectados dentro de un sistema.
IA
Ya no solo programamos interfaces. Construimos sistemas que pueden interpretar, generar y actuar.
DISEÑO.
CÓDIGO.
IA.
Built inside WordPress.
NO ES UN VÍDEO.
ES UNA ESCENA 3D.
El modelo que acabas de recorrer está renderizado en tiempo real dentro de WordPress. El scroll controla la cámara, la iluminación, las partículas y el contenido de la interfaz.
Un modelo 3D optimizado para web.
Partimos de un modelo en formato glTF, reducimos el peso de las texturas y lo empaquetamos como GLB para poder cargar geometría, materiales y texturas desde un único archivo.
El navegador crea la escena.
Three.js se encarga de la cámara, las luces, los materiales, el modelo y el renderizado WebGL. El objeto no es una imagen: existe realmente dentro de una escena tridimensional.
El scroll se convierte en una timeline.
En lugar de reproducir una animación automáticamente, vinculamos el avance de la timeline al scroll. Cada movimiento del usuario modifica la cámara, la rotación, las luces y las distintas etapas narrativas.
Luz, bloom y profundidad.
Añadimos iluminación dinámica, environment mapping, partículas y postprocesado para que la placa deje de parecer un modelo incrustado y pase a sentirse como parte de una experiencia.
const experience =
gsap.timeline({
scrollTrigger: {
trigger: "#esw-board-experience",
start: "top top",
end: "bottom bottom",
scrub: 1.15,
pin: stage
}
});
experience.to(
camera.position,
{
x: -0.75,
y: 0.72,
z: 1.25
}
);EL RESTO DEL CÓDIGO ESTÁ AQUÍ ABAJO.
¿QUIERES VER
CÓMO ESTÁ HECHO?
Suscríbete y desbloquea el HTML, CSS y JavaScript completo de esta experiencia para utilizarlo como referencia en tus propios experimentos.