Casa do Açaí
em desenvolvimentoLanding page de uma açaiteria construída em cima do scroll: o copo é um vídeo que avança quadro a quadro conforme a página desce, e rebobina quando sobe.
Next.js 16React 19TypeScriptTailwind CSS v4GSAP ScrollTriggerLenis
demo://casa-do-acai · navegávelTela cheia ⇱
O que ele faz
- Hero de 7200px de pista em que o vídeo do copo fica fixo e é percorrido pelo scroll, com quatro camadas de conteúdo passando por cima
- Lenis e GSAP sincronizados no mesmo ticker. Sem isso o scrub atrasa meio quadro e aparece o arrasto típico de implementação mal feita
- Gradiente do fundo amostrado do próprio vídeo por anéis radiais (mediana de 120 ângulos por anel), em svh para não descolar do copo em telas de proporção diferente
- Títulos que acendem palavra a palavra, com opacidade de repouso fixada em 0,45 por contraste medido (3,84:1 a 4,31:1) e não por gosto
- Carrosséis com aria-roledescription e cópia decorativa marcada como aria-hidden; sob prefers-reduced-motion a faixa para (WCAG 2.2.2)
- Montador de pedido: escolhe tamanho, adicionais grátis e pagos, retirada ou entrega, e fecha no WhatsApp com a mensagem pronta. As regras de validação vivem numa camada de domínio que não conhece React
- O copo do montador se enche conforme a pessoa escolhe: cada adicional entra como camada sobre a foto real do copo da casa
- Cardápio com os três tamanhos de açaí e os adicionais que a casa não cobra, mapa apontando para a coordenada da loja e rota direta no Google Maps
- Textura de grão em SVG inline via data URI: sem requisição de rede e sem arquivo em /public