Logo

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:
11.2025 — 12.2025
  • Client Project
  • Next.js
  • React
  • GSAP
  • Three.js
  • Design System
  • Performance
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

Arquitetura
Single-page

Narrativa completa sem navegação, otimizada para o pico

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.

Resultados

Landing no ar dentro do prazo de campanha, com identidade visual própria e consistente, e pico de tráfego sazonal absorvido sem degradação.

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