Motion
Animacoes e transicoes que dao vida a interface. Fade, slide, glow, float e hover effects com timing preciso.
Fade In
Elemento aparece gradualmente com opacity 0 → 1.
Fade In
animate-fade-in — 0.6s ease-out
.animate-fade-in
Fade Up
Elemento sobe 20px enquanto aparece.
Fade Up
animate-fade-up — translateY(20px) → 0
.animate-fade-up
Slide In
Elemento desliza da esquerda com translateX(-20px) → 0.
.animate-slide-in-left
Glow Pulse
Pulsacao de brilho ciclica — opacity 0.4 ↔ 0.8.
.animate-glow-pulse — 3s ease-in-out infinite
Float
Movimento flutuante vertical — translateY(0) ↔ translateY(-10px).
.animate-float — 6s ease-in-out infinite
Ticker
Texto deslizante horizontal — translateX(0) → translateX(-50%).
.animate-ticker — 30s linear infinite
Hover Effects
Cards com scale, glow-ring e border-color transition.
Scale
hover:scale-[1.03]
duration-300
Glow Ring
.glow-ring
blur-12px gradient
Border Glow
hover:border-brand-primary
+ shadow-glow-sm
Page Transitions
Abordagem para transicoes entre paginas.
Abordagem
Transicoes de pagina sao tratadas com CSS animations no mount. Cada pagina faz fade-up ao entrar, criando fluidez na navegacao.
- Enter: fade-up com 0.6s ease-out
- Stagger: elementos sequenciais com delay incremental
- Scroll: intersectionObserver para reveal on scroll
Timing tokens