09Tokens
Curva assinatura: cubic-bezier.
Tudo respira na mesma curva. Tudo aparece com o mesmo reveal. A coerência de motion é o que faz o sistema sentir vivo, não animado.
Curvas e durações
--e-ease· cubic-bezier(0.22, 1, 0.36, 1) · default--e-ease-out· cubic-bezier(0.16, 1, 0.3, 1) · reveals--e-ease-spring· cubic-bezier(0.34, 1.56, 0.64, 1) · CTAs press--e-dur-fast· 150ms · hover micro--e-dur-base· 300ms · default--e-dur-slow· 600ms · reveals
Demo de curva
Padrões de uso
- Reveal on scroll:
opacity 0→1 + translateY(20px→0)em 600ms ease-out. - Hover de card:
translateY(-2px)+ spotlight em 250ms. - CTA press:
scale(0.98)em 150ms ease-spring. - Counter: 0→target em 1800ms cubic-out, dispara no IntersectionObserver.
- Marquee: linear infinite,
animation-play-state: pausedno hover.
prefers-reduced-motion: sempre desativar marquee, parallax, reveal e cometas do Lorenz. Manter só hovers de botão (essenciais para feedback).