01 · cinematográfico
Parallax e texto em camadas
Orbes que reagem à rolagem, título que entra palavra por palavra e cartões que inclinam com o cursor.
- parallax
- stagger
- tilt 3D
- marquee
02 · editorial kinetic
Tipografia e faixa horizontal
Serifa grande, revelação por máscara e uma galeria que anda para o lado enquanto a página rola.
- clip-path
- scroll pinned
- serifa
- hover list
03 · produto / SaaS
Bento grid e dados vivos
Gradiente que segue o cursor, contadores que sobem ao aparecer e barras que medem progresso real.
- bento
- counter
- progress
- gradient
Como personalizar para o cliente
Cada modelo concentra a marca em variáveis CSS no topo do arquivo (--acento, --bg,
--tinta). Trocar três valores muda a identidade sem mexer no layout.
Regras que valem para os três
Respeitam prefers-reduced-motion, têm foco visível no teclado, não usam imagem externa e não
disparam download de fonte ou script de terceiro.