Animated Balance

A component that displays a monetary value with a smooth counting animation effect, perfect for dashboards and financial interfaces.

Total Revenue
0$

Usage

import AnimatedBalance from '@/components/AnimatedBalance';

export default function MyPage() {
  return (
    <AnimatedBalance 
      value={125000}
      label="Total Revenue"
      currency="INR"
      duration={1500}
    />
  );
}

Examples

Basic Animated Balance

A simple balance display with animated counting.

Total Revenue
0INR
<AnimatedBalance 
  value={125000}
  label="Total Revenue"
  currency="INR"
/>

Multiple Currency Examples

Balance displays with different currencies and values.

Total Revenue
0$
Expected Income
0€
Pending Payments
0£
<div className="flex flex-wrap gap-8">
  <AnimatedBalance 
    value={125000}
    label="Total Revenue"
    currency="$"
  />
  <AnimatedBalance 
    value={95000}
    label="Expected Income"
    currency="€"
  />
  <AnimatedBalance 
    value={45000}
    label="Pending Payments"
    currency="£"
  />
</div>

Custom Animation Duration

Balance display with a faster animation speed.

Monthly Expenses
0$
<AnimatedBalance 
  value={78500}
  label="Monthly Expenses"
  currency="$"
  duration={1000}
/>