Lottie reproduz animações criadas no After Effects como arquivos JSON. São escaláveis, leves e totalmente controláveis via código (play, pause, stop, loop, speed).
Clique em cada card para pausar / reproduzir a animação
Use lottieRef para controlar programaticamente a animação
Trecho básico para reproduzir uma animação Lottie
import dynamic from 'next/dynamic';
// Sempre dynamic com ssr:false (usa document no módulo)
const Player = dynamic(
() => import('@lottiefiles/react-lottie-player')
.then(m => m.Player),
{ ssr: false }
);
// Reprodução simples com loop
<Player src="/lottie/rocket.json" autoplay loop
style={{ width: 200, height: 200 }} />
// Com controle via ref
import type { AnimationItem } from 'lottie-web';
const ref = useRef<AnimationItem | null>(null);
<Player lottieRef={(r) => { ref.current = r; }}
src="/lottie/success.json"
loop={false} keepLastFrame />
ref.current?.play(); // iniciar
ref.current?.pause(); // pausar
ref.current?.stop(); // parar e resetar