Açaí Point 92
Site cinematográfico da açaiteria Açaí Point 92: copo de açaí como protagonista, intro animada,
coreografia de scroll com GSAP, cardápio, montador de copo, carrinho e pedido pelo
WhatsApp.
Stack: Next.js 16 (App Router) · React 19 · TypeScript · Tailwind CSS v4 · GSAP +
ScrollTrigger · Lenis · React Three Fiber + Drei · Lucide.
Rodando
Requer Node.js 20.9 ou superior.
npm install
npm run dev # http://localhost:3000
npm run build # build de produção (inclui checagem de tipos)
npm start
Para rever a intro depois da primeira visita, abra uma aba anônima (ela roda uma vez
por sessão) ou limpe o sessionStorage.
Configurando a loja
| O quê | Onde |
|---|
| Nome, WhatsApp, Instagram, endereço, horários, retirada/entrega | src/config/site.ts |
| Títulos, frases e botões | src/config/copy.ts |
| Produtos, tamanhos e preços | src/data/menu.ts |
| Bases, complementos, coberturas e limites do montador | src/data/builder.ts |
| Fotos (cardápio, Experiência, Galeria) | src/data/photos.json, src/data/media.ts, src/data/menu.ts |
- WhatsApp: só dígitos com DDI e DDD (
"5511912345678"). Enquanto estiver vazio, o botão de finalizar fica desativado e os atalhos flutuantes não aparecem em produção.
- Preços: os valores atuais são de demonstração e o site avisa isso. Troque pelos reais e mude
demoPrices para false.
- Endereço e horários: só aparecem quando preenchidos.
Fotos, logo e o copo 3D
Logo: arte oficial da loja com o fundo recortado em public/images/brand/logo.webp, usada pelo componente src/components/ui/Logo.tsx (header, menu do celular, rodapé e reserva das fotos). Ícone da aba em src/app/icon.png e ícone do iPhone em src/app/apple-icon.png. Os originais ficam em tools/brand/ (logo-original.png com fundo, logo-recortada.webp sem fundo). Para trocar a logo, substitua logo.webp por outra com fundo transparente e ajuste LOGO.width/height em Logo.tsx.
Fotos (cardápio, Experiência e Galeria): fotos reais de açaí de bancos gratuitos, listadas em src/data/photos.json com o link da página original de cada uma.
- Licenças: Unsplash License e Pexels License — uso comercial gratuito, sem atribuição obrigatória (o site dá o crédito mesmo assim).
- São ilustrativas: não são fotos da loja nem dos produtos exatos (o cardápio avisa "Imagens meramente ilustrativas"). Troque por fotos próprias assim que tiver.
- Por padrão o site carrega as fotos dos servidores do Unsplash/Pexels e o
next/image otimiza e guarda em cache. Para hospedar as cópias no próprio projeto: npm run fotos (baixa para public/images/fotos/) e depois localPhotos: true em src/config/site.ts.
- Se uma foto não carregar (sem internet, prévia, link removido), entra no lugar um render 3D local de
public/images/fallback/ com o mesmo tema. Se nem esse carregar, aparece um painel roxo com a logo.
Copo 3D (renders): o copo do Hero, os ingredientes animados, a prévia do montador e o copo do contato são renders gerados por código (copo de plástico transparente com reflexo de estúdio, açaí cremoso, banana e morango encostados na parede, granola 3D, leite condensado e gotas de condensação):
| Arquivo | Para quê |
|---|
public/sequence/spin/** | 60 frames da volta de 360° do copo (Hero e scroll) |
public/sequence/bare/** | Mesmos ângulos sem coberturas (ingredientes saindo do copo) |
public/sequence/closeup/** | Aproximação da câmera na textura |
public/images/ingredients/*.webp | Recortes dos ingredientes (fundo transparente) |
public/images/builder/base-*.webp | Copo sem coberturas por base (prévia do montador) |
public/images/menu/especial.webp | Copo flutuante da seção de contato |
public/images/og.jpg | Imagem de compartilhamento (1200 × 630) |
Para a versão final do copo:
- Sequência renderizada (recomendado): exporte os frames com as especificações de
public/sequence/README.md e substitua os arquivos com os mesmos nomes.
- Modelo 3D: coloque
public/models/acai-cup.glb (convenções em public/models/README.md) e mude renderer: "model" em src/config/experience.ts.
O script que gerou os renders está em tools/render-placeholders (veja o README de lá).
O que cada seção faz
- Intro: gota flutuando → câmera se aproxima → queda em câmera lenta → onda roxa → o copo surge girando sob luz lateral → "NÃO É SÓ AÇAÍ." / "É UMA EXPERIÊNCIA." → a câmera se afasta e o copo pousa no Hero. Pode ser pulada (botão ou Esc), não bloqueia o carregamento e é ignorada com movimento reduzido.
- Hero + ScrollExperience (pin): 0% copo flutuando · 20% gira ~45° e o fundo vira roxo · 40% morango, banana, granola e leite condensado saem do copo e flutuam com etiquetas · 60% voltam e se encaixam · 80% close-up na textura · 100% o copo vai para a direita e abre a seção seguinte.
- Ingredientes: o açaí fica no centro (visto de cima); morango entra pela esquerda, banana pela direita, granola cai e o leite condensado é desenhado em espiral.
- Cardápio: 7 produtos com tamanhos, preço por tamanho, "Personalizar" (abre o montador já com a combinação) e "Adicionar".
- Monte seu açaí: 5 etapas (tamanho, base, complementos, coberturas, revisão) com prévia ilustrativa que recebe cada ingrediente e preço atualizado.
- Carrinho: quantidades, observações por item, nome, retirada ou entrega, endereço, subtotal e mensagem organizada para o WhatsApp (ou "Copiar mensagem"). O carrinho fica salvo no navegador.
- Experiência, Galeria (com lightbox) e Contato.
Desempenho e acessibilidade
- Frames carregados progressivamente; variante leve (540 px) no mobile e em conexões econômicas.
- O modelo 3D só é baixado no modo
"model", com WebGL e em aparelhos não fracos.
prefers-reduced-motion: sem intro, sem pin, sem scroll suave; tudo visível.- Funciona sem WebGL (sequência em
<canvas> 2D) e o primeiro frame é um <img> (LCP e sem JS).
- Diálogos acessíveis (carrinho, menu, lightbox), foco visível, link "Pular para o conteúdo".
- SEO: metadados, Open Graph,
robots.txt, sitemap.xml e dados estruturados só com o que estiver configurado. Ajuste site.url para o domínio real.
Publicando
Funciona em qualquer host com suporte a Next.js (Vercel, por exemplo): conecte o
repositório e publique. Defina site.url antes.
Regras para quem for editar
Leia CLAUDE.md — arquitetura, coreografia de scroll e regras de animação.
