Natal da Sorte, ACID
Detalhes do Projeto
- Período:
- 07.2026 → 09.2026
- Client Project
- Next.js
- React
- GSAP
- Three.js
- Design System
- Performance

Impacto em números
Tokens definidos antes do código
CDN, sem servidor no caminho crítico
Áudio, scroll dinâmico, partículas e neve em Three.js
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
Next.js
Entrega estática servida por CDN, sem servidor no caminho crítico.
GSAP e Motion
Timeline de animação de entrada com foco em performance mobile.
Design tokens
Paleta semântica e escala tipográfica versionadas antes do código.
Galeria(2)

