Components
Experience a vibrant, animated display of digital numbers with smooth transitions and modern color themes. This demo highlights various number formats—counters, percentages, currency, large values, precise decimals, and negatives—each styled with a unique, eye-catching gradient. Perfect for dashboards, analytics, and any application where dynamic, readable numbers matter.
Loading preview...
import { DigitalNumberView } from "@/components/ui/digital-number-animation";
export default function DemoOne() {
return <div className="min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-cyan-50 py-12 px-4 w-full">
<div className="max-w-4xl mx-auto">
<h1 className="text-3xl font-bold text-center mb-8 text-indigo-900 bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
Digital Number Animation
</h1>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{/* Basic number animation */}
<div className="bg-gradient-to-br from-blue-50 to-indigo-100 rounded-lg shadow-sm border border-blue-200 p-6 hover:shadow-md transition-all duration-200 hover:scale-105">
<h2 className="text-lg font-semibold mb-4 text-blue-800">Basic Counter</h2>
<DigitalNumberView value={1234} variant="blue" />
</div>
{/* Percentage with suffix */}
<div className="bg-gradient-to-br from-purple-50 to-pink-100 rounded-lg shadow-sm border border-purple-200 p-6 hover:shadow-md transition-all duration-200 hover:scale-105">
<h2 className="text-lg font-semibold mb-4 text-purple-800">Percentage</h2>
<DigitalNumberView
value={95.7}
suffix="%"
decimalPlaces={1}
duration={1500}
variant="purple"
/>
</div>
{/* Currency with prefix */}
<div className="bg-gradient-to-br from-emerald-50 to-teal-100 rounded-lg shadow-sm border border-emerald-200 p-6 hover:shadow-md transition-all duration-200 hover:scale-105">
<h2 className="text-lg font-semibold mb-4 text-emerald-800">Currency</h2>
<DigitalNumberView
value={1299.99}
prefix="$"
decimalPlaces={2}
duration={2500}
variant="emerald"
/>
</div>
{/* Large number */}
<div className="bg-gradient-to-br from-amber-50 to-orange-100 rounded-lg shadow-sm border border-amber-200 p-6 hover:shadow-md transition-all duration-200 hover:scale-105">
<h2 className="text-lg font-semibold mb-4 text-amber-800">Large Number</h2>
<DigitalNumberView
value={1000000}
duration={3000}
className="text-3xl"
variant="amber"
/>
</div>
{/* Decimal number */}
<div className="bg-gradient-to-br from-cyan-50 to-blue-100 rounded-lg shadow-sm border border-cyan-200 p-6 hover:shadow-md transition-all duration-200 hover:scale-105">
<h2 className="text-lg font-semibold mb-4 text-cyan-800">Precise Value</h2>
<DigitalNumberView
value={3.14159}
decimalPlaces={5}
duration={1800}
variant="cyan"
/>
</div>
{/* Negative number */}
<div className="bg-gradient-to-br from-rose-50 to-red-100 rounded-lg shadow-sm border border-rose-200 p-6 hover:shadow-md transition-all duration-200 hover:scale-105">
<h2 className="text-lg font-semibold mb-4 text-rose-800">Negative Value</h2>
<DigitalNumberView
value={-42}
duration={1200}
variant="rose"
/>
</div>
</div>
</div>
</div>
}