Animated Statistics
Numbers That Come Alive
+0
Projects Shipped
0%
Client Satisfaction
$0.0M
Revenue Generated
0
Years Experience
Overview
A high-performance number counter that animates from 0 to a target value using Framer Motion springs. It automatically triggers when scrolled into view. A highly requested component for landing pages, dashboards, and portfolio statistics sections.
Usage
import { AnimatedCounter, StatsSection } from "@/components/creative/animated-counter"
Basic Counter
<AnimatedCounter value={500} prefix="+" duration={2} />
Full Stats Section
<StatsSection
stats={[
{ value: 500, label: "Projects Completed", prefix: "+" },
{ value: 99, label: "Client Satisfaction", suffix: "%" },
{ value: 2.5, label: "Revenue Generated", prefix: "$", suffix: "M", decimals: 1 },
{ value: 15, label: "Years Experience" }
]}
/>
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { AnimatedCounter } from "@/components/creative/animated-counter";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { AnimatedCounter } from "@/components/creative/animated-counter";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<AnimatedCounter
value{10}
direction{/* value */}
duration{10}
/>
</div>
);
}