Fade Up
Conteúdo entra de baixo pra cima com opacity 0→1. Padrão pra reveal de section ao scroll.
- Duração
- 700ms
- Easing
cubic-bezier(0.16, 1, 0.3, 1)- Onde usa
- page-load · scroll-reveal · drawer open
07 · Motion
MOVIMENTO
COMO MENSAGEM.
Animação não decora — narra. Cada pattern tem uma intenção (foco, ritmo, hierarquia, respiro). Quando o movimento não significa nada, ele sai.
Demonstração ao vivo
CRIAMOS MOVIMENTOS MEMORÁVEIS
Patterns canônicos
Blur In
Texto entra com blur(12px) brightness(0%) e clareia. Sensação de "foco que chega" — hero entrance.
- Duração
- 400ms · stagger 20ms
- Easing
linear (per char)- Onde usa
- hero H1 e H2 da LP
Scramble
Texto embaralha letras em ASCII rotation antes de assentar. Letting brand "se escrever".
- Duração
- 1400ms total
- Easing
linear · speed 0.03- Onde usa
- subtitle hero · estado loading prolongado
Hover Lift
Card sobe -3px com border accent color. Sinaliza interatividade sem mudar layout.
- Duração
- 200-300ms
- Easing
cubic-bezier(0.16, 1, 0.3, 1)- Onde usa
- todos os cards clicáveis
Stagger Reveal
Items de uma list aparecem em cascata com delay incremental 50-100ms. Cria ritmo visual.
- Duração
- 400ms × N items
- Easing
cubic-bezier(0.16, 1, 0.3, 1)- Onde usa
- grid de cards no overview, lista de fundadores
Type On
Hurricane handwrite escrita letra-a-letra com rotação leve. Assinatura humana.
- Duração
- ~200ms por char
- Easing
ease forwards- Onde usa
- 1× por página máximo · momento de respiro
Tokens de tempo
QUATRO VELOCIDADES.
quick
200ms
cubic-bezier(0.4, 0, 0.2, 1)Hover de botão, focus de input, mudança de cor.
standard
400ms
cubic-bezier(0.16, 1, 0.3, 1)Page load reveal, fade-up de seções, drawer open/close.
expressive
700ms
cubic-bezier(0.16, 1, 0.3, 1)Hero entrance, staggered text reveal, scroll-snap.
narrative
1400ms
linearTextScramble do subtitle. Duração longa = sensação de inevitabilidade.
Princípios
- 01 Quando o movimento não significa nada, ele sai.
- 02 Curva padrão é
cubic-bezier(0.16, 1, 0.3, 1)— saída forte, chegada suave. - 03 Stagger sempre 30-50ms por item. Mais que isso vira pop, menos vira borrão.
- 04 Nunca anime mais que 2 propriedades simultâneas. Transform + opacity é o padrão.
- 05 Respeite
prefers-reduced-motion. Quem desliga animação, não vê delay.