Akatsuki

Loja de animes cinematográfica em 3D · checkout no WhatsApp

Lojas de nicho (animes e colecionáveis) disputam atenção e precisam de uma vitrine memorável que venda sem fricção.

• 01A cena de fundo não é um vídeo nem uma imagem. É uma cena React Three Fiber renderizada num <Canvas> fixo atrás de todo o conteúdo, com lua,…+

  LER O DETALHE TÉCNICO

  A cena de fundo não é um vídeo nem uma imagem. É uma cena React Three Fiber renderizada num <Canvas> fixo atrás de todo o conteúdo, com lua, névoa e um campo de 120 partículas orbitais, todos movidos por shaders GLSL escritos à mão (ruído simplex, fbm) em vez de texturas prontas. A troca de tema entre Akatsuki e Expansão de Domínio não recarrega a cena: um único uniform uMorph interpola entre duas paletas e duas funções de céu dentro do mesmo fragment shader, então a lua vermelha e a esfera do Seis Olhos são a mesma geometria, só com o material mudando em tempo real.

• 02Performance foi tratada como parte do design, não como ajuste depois. O Canvas roda em frameloop="demand" com um throttle manual a 30fps, po…+

  LER O DETALHE TÉCNICO

  Performance foi tratada como parte do design, não como ajuste depois. O Canvas roda em frameloop="demand" com um throttle manual a 30fps, porque o fundo é atmosférico e 60fps seria desperdício de GPU. O dpr fica travado em 1 mesmo em telas retina, o que corta ~75% dos fragmentos processados, e o render pausa sozinho quando a aba perde foco. Por cima disso existe um PerfModeProvider com heurística estática (RAM, núcleos, prefers-reduced-motion, ponteiro touch) e um watchdog que mede o FPS real nos primeiros segundos. Se cair abaixo de 45fps, a página rebaixa para um modo "lite" sem WebGL, só com atmosfera CSS, e memoriza a decisão no localStorage pra não travar de novo na próxima visita.

• 03A camada de produto é deliberadamente simples por cima da complexidade visual. As 24 figures (heróis e vilões) e os mangás vivem num array t…+

  LER O DETALHE TÉCNICO

  A camada de produto é deliberadamente simples por cima da complexidade visual. As 24 figures (heróis e vilões) e os mangás vivem num array tipado em lib/products.ts, o carrinho é um Context com localStorage que só persiste depois de hidratar, o que evita sobrescrever o storage no primeiro render, e cada personagem tem uma cor de "aura" mapeada em lib/aura.ts: Kurama vermelho pro Naruto, Limitless azul pro Gojo, Instinto Superior prateado pro Goku. Ela é disparada como uma explosão de partículas via Framer Motion quando o item entra no carrinho. Nenhuma dessas interações depende do Three.js: a aura, o toast e o "punch" do card são CSS e SVG puro, o que mantém a cena 3D isolada e code-split do resto da UI.

• 04Não existe checkout. Cada card monta um link wa.me com a mensagem já preenchida (nome, anime, preço) e o carrinho monta uma única mensagem c…+

  LER O DETALHE TÉCNICO

  Não existe checkout. Cada card monta um link wa.me com a mensagem já preenchida (nome, anime, preço) e o carrinho monta uma única mensagem consolidada com todos os itens e o total antes de abrir o WhatsApp. A lógica de formatação de texto fica isolada em lib/whatsapp.ts, sem gateway de pagamento nem backend. Combinado com o code-splitting da cena 3D no Next 14 (só carrega no cliente) e com a página de produto usando View Transitions nativas do navegador para uma transição compartilhada entre o card e o detalhe, o resultado é uma loja que parece cara de rodar mas serve tudo estático, direto do edge da Vercel.

CONSTRUÍDO COM — Next.js · TypeScript · Three.js · React Three Fiber · Tailwind · Framer MotionCÓDIGO ↗

Cena 3D + 2 temas animados

PROJETO AUTORAL · DEMO

[ QUERO ALGO PARECIDO ]