CÓMO SE HIZO ESTE SITIO
Un cubo que se resuelve con el scroll, y todo lo que hay detrás.
Esta página es el caso de estudio de sí misma: qué stack usamos, qué decisiones tomamos y qué mide. Sin cifras redondeadas: son las del último build.
100 · 100 · 100 · 100
Lighthouse en escritorio: rendimiento, accesibilidad, buenas prácticas y SEO.
2
Draw calls por frame para dibujar el cubo entero.
1:1
Frames del cubo por frame de pantalla mientras algo se mueve, sea 60, 120 o 144 Hz.
0
Frames de más de 50 ms en un recorrido completo, medido con GPU real.
7
Giros de la solución, uno por sección: el cubo llega resuelto al contacto.
1
Recálculo de estilos por cambio de sección. Antes eran ~86.
DECISIONES
El cubo se resuelve con el scroll, no con un video
Un scramble fijo de siete movimientos; la solución es la lista invertida. Cada sección dispara un giro y una cola garantiza que ningún giro quede a medias aunque scrollees rápido. Llegás al contacto con el cubo resuelto: la metáfora se cumple literalmente.
Las poses se derivan del layout, no de constantes
Dónde queda el cubo en cada sección se mide en el DOM en tiempo real: la columna libre a la derecha del texto en escritorio, la banda reservada arriba de cada panel en teléfonos. Cambia el contenido y el cubo se recalibra solo. Un test E2E recorre siete puntos de la página y verifica que no pise una sola letra.
Un solo reloj
El ticker de GSAP mueve Lenis, ScrollTrigger y las poses, y en ese mismo frame dibuja el cubo con advance(). La cadencia se elige contando frames sobre la tasa de refresco medida: parejo a cualquier hercio, sin ir un frame detrás del texto.
Lo que no se ve, no se paga
El WebGL entra con la primera señal de vida del visitante. Fuera de escena el cubo no se dibuja. Nada fijo a pantalla completa tiene animaciones infinitas. En reposo, 60 fps en escritorio y 30 en teléfonos.
Accesible de verdad
Texto real detrás de cada efecto, contraste AA medido por axe en cada build, targets táctiles de 44 px, acordeón nativo, y un toggle visible para reducir movimiento además del del sistema.
SEO y GEO desde el código
Organización, servicios, productos propios, FAQ y migas en JSON-LD; un llms.txt; crawlers de IA permitidos explícitamente; una tarjeta Open Graph distinta por servicio; y contenido que se puede verificar, como esta página.
STACK
Next.js 16 y React 19
App Router, páginas estáticas, imágenes en AVIF/WebP y transiciones de ruta con la View Transitions API.
React Three Fiber + Three.js
El cubo: 27 piezas y 54 stickers en dos draw calls con instancing, material Phong y tres luces.
GSAP + ScrollTrigger + Lenis
Un solo reloj para todo: scroll suave, coreografía por sección y el render del cubo en el mismo frame.
Tailwind CSS 4
Sistema de tokens propio: seis colores de cara, un acento que cambia por sección y tipografías self-hosteadas.
Vitest + Playwright + axe
24 pruebas unitarias y 23 E2E, incluidas las que miden que el cubo nunca pisa texto en ningún tamaño de pantalla.
Resend + Zod
Formulario con validación, honeypot, límite de envíos y respuesta directa al visitante.
Todo esto es lo que hacemos para nuestros clientes. Si querés un sitio que se mida así, así trabajamos los sitios web.