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.
3
Idiomas con URL propia, hreflang y contenido completo: español, inglés y portugués.
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.
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 hagas scroll rápido. Llegas 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 —o el idioma, que cambia el largo de cada frase— y el cubo se recalibra solo. Un test E2E recorre siete puntos de la página y verifica que no pise una sola letra.
Tres idiomas, un solo árbol de rutas
Todo el sitio vive bajo `/[lang]`, con los mismos segmentos en inglés neutro para los tres idiomas. El texto está en diccionarios tipados: si se agrega una clave en español y falta en inglés o portugués, el build falla. La raíz detecta el idioma del navegador y redirige, y cada página declara sus alternates hreflang.
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.
STACK
Next.js 16 y React 19
App Router, rutas por idioma con root params, 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
Pruebas unitarias y E2E, incluidas las que miden que el cubo nunca pisa texto en ningún tamaño de pantalla ni en ningún idioma.
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 quieres un sitio que se mida así, así trabajamos los sitios web.