COMO ESTE SITE FOI FEITO
Um cubo que se resolve com o scroll, e tudo o que há por trás.
Esta página é o estudo de caso de si mesma: que stack usamos, que decisões tomamos e o que ela mede. Sem números arredondados: são os do último build.
100 · 100 · 100 · 100
Lighthouse no desktop: desempenho, acessibilidade, boas práticas e SEO.
3
Idiomas com URL própria, hreflang e conteúdo completo: espanhol, inglês e português.
2
Draw calls por frame para desenhar o cubo inteiro.
1:1
Frames do cubo por frame de tela enquanto algo se move, a 60, 120 ou 144 Hz.
0
Frames acima de 50 ms em um percurso completo, medido com GPU real.
7
Giros da solução, um por seção: o cubo chega resolvido ao contato.
DECISÕES
O cubo se resolve com o scroll, não com um vídeo
Um embaralhamento fixo de sete movimentos; a solução é essa lista invertida. Cada seção dispara um giro e uma fila garante que nenhum giro fique pela metade mesmo com scroll rápido. Você chega ao contato com o cubo resolvido: a metáfora se cumpre literalmente.
As poses derivam do layout, não de constantes
Onde o cubo fica em cada seção é medido no DOM em tempo real: a coluna livre à direita do texto no desktop, a faixa reservada acima de cada painel no celular. Mude o conteúdo — ou o idioma, que muda o tamanho de cada frase — e o cubo se recalibra sozinho. Um teste E2E percorre sete pontos da página e verifica que ele não cobre uma única letra.
Três idiomas, uma só árvore de rotas
Todo o site vive sob `/[lang]`, com os mesmos segmentos em inglês neutro para os três idiomas. O texto fica em dicionários tipados: se uma chave é adicionada em espanhol e falta em inglês ou português, o build falha. A raiz detecta o idioma do navegador e redireciona, e cada página declara seus alternates hreflang.
Um só relógio
O ticker do GSAP move Lenis, ScrollTrigger e as poses, e nesse mesmo frame desenha o cubo com advance(). A cadência é escolhida contando frames sobre a taxa de atualização medida: parelho em qualquer hertz, sem ficar um frame atrás do texto.
O que não se vê, não se paga
O WebGL entra com o primeiro sinal de vida do visitante. Fora de cena o cubo não é desenhado. Nada fixo em tela cheia tem animações infinitas. Em repouso, 60 fps no desktop e 30 no celular.
Acessível de verdade
Texto real por trás de cada efeito, contraste AA medido pelo axe em cada build, alvos de toque de 44 px, acordeão nativo e um botão visível para reduzir movimento além do do sistema.
STACK
Next.js 16 e React 19
App Router, rotas por idioma com root params, páginas estáticas, imagens em AVIF/WebP e transições de rota com a View Transitions API.
React Three Fiber + Three.js
O cubo: 27 peças e 54 adesivos em dois draw calls com instancing, material Phong e três luzes.
GSAP + ScrollTrigger + Lenis
Um só relógio para tudo: scroll suave, coreografia por seção e o render do cubo no mesmo frame.
Tailwind CSS 4
Sistema de tokens próprio: seis cores de face, um acento que muda por seção e tipografias self-hosted.
Vitest + Playwright + axe
Testes unitários e E2E, incluindo os que medem que o cubo nunca cobre texto em nenhum tamanho de tela nem em nenhum idioma.
Resend + Zod
Formulário com validação, honeypot, limite de envios e resposta direta ao visitante.
Tudo isso é o que fazemos para os nossos clientes. Se você quer um site medido assim, é assim que trabalhamos os sites.