Motion
Micro-animações em CSS puro (sem framer-motion): Reveal (scroll reveal com IntersectionObserver + stagger via delay) e AnimatedNumber (contagem com requestAnimationFrame). Ambos respeitam prefers-reduced-motion e degradam para conteúdo estático sem JavaScript.
import { Reveal } from "@/components/motion/reveal"
import { AnimatedNumber } from "@/components/motion/animated-number"AnimatedNumber
O SSR renderiza o valor final (sem salto de layout); a contagem roda só no mount. Use format para moeda.
R$ 4.289,50
Reveal com stagger
Envolva cada card em <Reveal delay={n}> — os atrasos escalonados (0/60/120ms) criam a entrada em cascata do dashboard.
Tokens de sombra
A sombra dos cards de vidro é o utilitário .shadow-glass (globals.css) — nunca a string inline duplicada.
bg-card/50 + shadow-glass + backdrop-blur-2xl