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

PropTypeDefault
children
number
-
animate?
boolean
true
className?
string
-

Credits

Credit to Rauno for the original concept, from his Next.js dev tools prototype.