Casa do Açaí
Landing 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)
- 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