Escena 3D dirigida por scroll
Demo funcional con la arquitectura real de las webs premiadas: un único canvas WebGL persistente, terreno generado por shader, niebla atmosférica y una cámara que recorre un guion de planos según el scroll.
El scroll no mueve la página. Mueve una cámara.
Este es el cambio mental que separa una web normal de una web premiada. La sección está pinneada: mientras haces scroll, el documento no avanza — lo que avanza es una cámara dentro de una escena 3D en tiempo real.
La montaña no existe. La calcula la tarjeta gráfica.
No hay ningún modelo 3D descargado. Un plano liso entra al vertex shader y el ruido fbm desplaza cada vértice para generar el relieve. Cero bytes de asset, relieve infinito y modificable con un parámetro.
La niebla es el 80% del look premium.
La sensación de escala no viene de la geometría, viene de cómo se disuelve en la distancia. La niebla se calcula por píxel según la distancia a la cámara, y los valles se comen de blanco. Sin esto, la misma montaña parece un videojuego de 2004.
Lo que se vende no es el código: es el guion de planos.
Los cuatro planos de esta secuencia están definidos como datos — posición de cámara y punto de mira. Cambiar la narrativa es cambiar esa lista, no reescribir la escena. Así trabajan los estudios: dirección de arte primero, código después.
Los siete patrones, y dónde están en esta demo
Esto es lo que leímos en el código fuente de mont-fort.com (Immersive Garden + 60fps, Site of the Day en Awwwards, FWA y CSS Design Awards). Al lado, cómo se aplica aquí.
Patrón 01
Canvas WebGL único y persistente
Ellos
Un solo <canvas data-engine="three.js r169"> marcado como persistente entre páginas: al navegar, la escena nunca se destruye, la cámara viaja.
Esta demo
Aquí el canvas vive en la escena de la página y solo recibe un valor de progreso. El siguiente paso natural es elevarlo al layout para que sobreviva a los cambios de ruta.
Patrón 02
Terreno por shader en vez de modelo
Ellos
Montfort sí usa assets modelados y horneados en Blender/C4D, exportados en glTF con compresión Draco.
Esta demo
Sin artista 3D todavía, generamos el relieve en el vertex shader con ruido fbm. Mismo resultado visual a coste de descarga cero — la vía correcta para prototipar y presupuestar.
Patrón 03
Niebla atmosférica custom
Ellos
Niebla por shader modulada con ruido, no la niebla por defecto del motor. Es su firma visual.
Esta demo
Mezcla por distancia a cámara más niebla de valle, calculada por píxel en el fragment shader.
Patrón 04
Cámara como shot list
Ellos
Atributos data-scene y data-chapter en el HTML; un director central lee esos datos y mueve la cámara.
Esta demo
Array de keyframes con posición y punto de mira, interpolado por el progreso del scroll con easing por tramo.
Patrón 05
Smooth scroll y ticker único
Ellos
Lenis en el html, sincronizado con GSAP ScrollTrigger.
Esta demo
Exactamente lo mismo, y ya estaba en el proyecto: la escena se pinta en el ticker de GSAP, sin un rAF paralelo que se desincronice.
Patrón 06
Parallax de puntero amortiguado
Ellos
La escena responde al ratón con retardo, nunca 1:1.
Esta demo
Damping al 5% por frame sobre la posición de cámara. La cifra es pequeña a propósito: ahí está la elegancia.
Patrón 07
Presupuesto de rendimiento adaptativo
Ellos
Mallas comprimidas, texturas optimizadas, calidad degradada por dispositivo antes que romper.
Esta demo
Densidad de malla y devicePixelRatio reducidos en móvil, antialias desactivado en táctil, y respeto a la preferencia de movimiento reducido.
Por qué una web así cuesta entre 20.000 € y 40.000 €
El código no es la partida gorda. Esto es lo que realmente se factura, y en este orden de importancia.
Dirección de arte y guion visual
Storyboard de planos, paleta, ritmo de cámara. Se decide antes de escribir código.
Producción 3D
Modelado, texturizado, horneado de luces y exportación optimizada. Es la partida más grande y la que más se subestima.
Desarrollo creativo
Escena, shaders, cámara por scroll, transiciones entre capítulos, gestión de memoria.
Pulido de detalle
Easings, timings, micro-interacciones, sonido. Es lo que gana premios y lo que nunca se presupuesta.
Rendimiento y compatibilidad
Perfiles por dispositivo, degradación en móvil, accesibilidad y fallbacks.
Regla práctica: si el cliente no puede aportar assets 3D ni presupuesto de producción visual, no es un proyecto de 30.000 € — es una web de scrollytelling con vídeo, que es otra técnica y otro precio.
Por dónde seguir, en orden
Three.js Journey
El curso de Bruno Simon con el que ha aprendido esta generación de creative developers. De cero a shaders y escenas dirigidas por scroll. Si solo haces una cosa, esta.
The Book of Shaders
Gratuito. GLSL desde el principio. Es la diferencia entre un cubo que gira y la niebla de Montfort.
Ingeniería inversa con DevTools
Filtra Awwwards por Three.js, abre el inspector y busca los patrones de esta demo: canvas persistente, data-scene, Lenis. Ya sabes leerlos.
Blender básico o un artista de confianza
Sin assets buenos no hay web de premio. El código es la mitad del trabajo.
Sistematizarlo como plantilla propia
El patrón shot list + capítulos por datos es replicable. Convertirlo en tu base de partida es lo que te permite vender este producto en serie.