Opalyx.online

O desafio

Um estúdio que vende software sob medida não pode se apresentar num template. O site precisava provar capacidade técnica em vez de declará-la — sem sacrificar leitura, acessibilidade nem desempenho em celular.

O que construímos

Uma narrativa 3D em seis atos dirigida pelo scroll: os alvos de cada gota são gravados na geometria e o shader só interpola, então não há lógica de animação por frame na CPU e subir a página reverte tudo com exatidão. Quem navega sem WebGL ou com movimento reduzido recebe a mesma história em SVG e CSS. Os leads entram por uma função segura no banco — o site não tem chave privilegiada nenhuma.

Decisões que importam

• Coreografia assada na geometria

  O destino de cada gota em cada ato é gravado como atributo de vértice; o shader só interpola. Não há timeline nem estado — tudo é função da posição de scroll, então subir a página reverte a narrativa com exatidão.

• Fallback em camadas até o HTML puro

  Sem WebGL ou com movimento reduzido, a mesma história é contada por mosaicos SVG e CSS. Aparelhos modestos recebem uma cena mais leve; fora da viewport, a renderização pausa.

• Leads sem chave privilegiada

  O site não guarda nenhuma chave com poder de escrita: os leads entram por uma única função segura no banco, com validação, honeypot e limite de envios — imposto no próprio PostgreSQL.

• Enquadramento como invariante testado

  A opala nunca ocupa mais de 90% da largura da tela — um invariante trancado por testes em 8 tamanhos de viewport, do iPhone SE ao ultrawide.

Tecnologias

• Next.js
• React Three Fiber
• GLSL
• Tailwind
• Supabase