Vercel Animate Count
A number display that animates transitions between values with a blur + slide effect.
Installation
File Structure
animate-count.tsx
Usage
import { AnimateCount } from "@/components/unlumen-ui/animate-count";
<AnimateCount>{count}</AnimateCount>;API Reference
AnimateCount
| Prop | Type | Default | Description |
|---|---|---|---|
children | number | - | The number to display. |
animate? | boolean | true | Whether to animate transitions. Set to false to disable. |
className? | string | - | Additional className applied to the wrapper. |
Credits
Credit to Rauno for the original concept, from his Next.js dev tools prototype.
Keep in mind
Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.