Animações de Entrada
Fade In Up
Elemento animado
Scale In
Elemento animado
Efeitos de Texto
Typewriter
|
Count Up
0%
Interações
Card Hover
Passe o mouse
Efeito de levitação
Pulse Glow
Scroll Reveal
Role a página para ver os elementos animarem ao entrar no viewport.
ScrollReveal Component
Este card anima automaticamente quando entra na tela.
Stagger 1
Animação em sequência com delay entre elementos.
Stagger 2
Use para grids e listas.
Stagger 3
Controle o delay com a prop stagger.
0%
de redução no tempo de atendimento
API de Animações
import { fadeInUp, scrollReveal, countUp } from "@/lib/animations";
// Animação de entrada
fadeInUp(".element", { y: 30, duration: 0.6 });
// Scroll triggered
scrollReveal(".section", { y: 40, stagger: 0.1 });
// Contador animado
countUp(elementRef, 98, { suffix: "%", duration: 2 });
// Componentes React
<FadeIn delay={0.2}>
<h1>Título animado</h1>
</FadeIn>
<ScrollReveal>
<Card>Conteúdo</Card>
</ScrollReveal>