João Pedro

Command Palette

Search for a command to run...

Command Palette

Search for a command to run...

Natal da Sorte, ACID

Detalhes do Projeto

Período:
07.2026 → 09.2026
  • Client Project
  • Next.js
  • React
  • GSAP
  • Three.js
  • Design System
  • Performance
Logo de Natal da Sorte, ACID
Natal da Sorte, ACID

Impacto em números

Design System
Documentado

Tokens definidos antes do código

Entrega
Estática

CDN, sem servidor no caminho crítico

Motores de Interação
12

Áudio, scroll dinâmico, partículas e neve em Three.js

Integração
API do sorteio

Perguntas, cadastro e resultado vindos do sistema

Sobre o projeto

Campanha sazonal de fim de ano com janela curtíssima de execução. Precisava ter acabamento visual de marca grande, ir ao ar rápido e aguentar pico de acesso concentrado.

O design system está versionado em documento próprio, com paleta completa em tokens semânticos (surface, primary, tertiary, containers e estados on-*), escala tipográfica em Plus Jakarta Sans e regras de contraste, tudo definido antes do código.

GSAP, Motion e Three.js para animação de entrada e profundidade, com foco em performance mobile, porque a maior parte do tráfego de campanha regional vem de celular. A página inteira é uma única rota, dividida em módulos independentes de áudio, neve em Three.js, partículas, velocidade de scroll e gate de introdução, cada um isolado para não travar os outros se algo falhar.

Entrega estática: página de campanha não precisa de servidor, precisa de CDN e de não cair no pico.

Em setembro o site deixou de ser só vitrine. O formulário busca na API do sistema de sorteios as perguntas que a campanha configurou e monta a tela a partir delas, então a ACID muda o cadastro sem pedir deploy. A participação grava direto no sistema, quem já participou vê os próprios códigos e pode cadastrar outro, e a seção do sorteio vai mostrar o resultado real, sem base de demonstração. O prêmio é um cheque de R$ 2.000, e regulamento e política de privacidade ganharam páginas próprias.

Até a imagem de compartilhamento passou por dieta, de 568 KB para 185 KB. Campanha regional circula mais no WhatsApp do que em qualquer outro lugar.

Resultados

Landing no ar dentro do prazo, com identidade própria e ligada ao sistema de sorteios: perguntas, cadastro e resultado saem do mesmo lugar.

Stack técnica

01

Next.js

Entrega estática servida por CDN, sem servidor no caminho crítico.

02

GSAP e Motion

Timeline de animação de entrada com foco em performance mobile.

03

Design tokens

Paleta semântica e escala tipográfica versionadas antes do código.

Galeria(2)

Natal da Sorte, ACID, imagem 1
Natal da Sorte, ACID, imagem 2