Motion
Animações e transições do design system
Fade In
Elemento aparece com opacidade crescente — animate-fade-in
animation: fadeIn 0.5s ease-out
Opacidade de 0 para 1 em 500ms. Usado em modais, cards e conteúdo lazy-loaded.
Slide Up
Elemento sobe 20px enquanto aparece — animate-slide-up
animation: slideUp 0.5s ease-out
Translação Y de 20px para 0 com fade. Usado em seções ao entrar no viewport.
Pulse Red
Glow vermelho pulsante infinito — animate-pulse-red
animation: pulseRed 2s ease-in-out infinite
Box-shadow oscila entre 20px e 40px de glow. Usado em CTAs e badges LIVE.
Ticker
Translação horizontal contínua — animate-ticker
animation: ticker 30s linear infinite — translateX(0) to translateX(-50%)
Logo Entrance
Combinação de scale + fade para entrada de marca
animation: logoEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1)
Scale de 0.8 para 1.0 com fade-in. Curva exponencial para entrada dramática.