feat: add AnimatedCounter component and update stats section with hero asset color adjustment

This commit is contained in:
sazzadulalambd
2026-06-22 17:12:33 +06:00
parent 79d32a9e83
commit 24b00fefcd
3 changed files with 80 additions and 22 deletions

View File

@@ -119,7 +119,7 @@ function Battery({ position, scale = 1, rotation = [0, 0, 0] }: { position: [num
{/* Main Battery Body */}
<mesh position={[0, 0, 0]} castShadow receiveShadow>
<boxGeometry args={[0.6, 1.2, 0.4]} />
<meshStandardMaterial color="#41694cff" roughness={0.4} metalness={0.8} />
<meshStandardMaterial color="#1e293b" roughness={0.4} metalness={0.8} />
</mesh>
{/* Top Cap */}

View File

@@ -0,0 +1,45 @@
'use client';
import { useState, useEffect, useRef } from 'react';
export default function AnimatedCounter({ end, duration = 2000, suffix = "" }: { end: number, duration?: number, suffix?: string }) {
const [count, setCount] = useState(0);
const [hasStarted, setHasStarted] = useState(false);
const elementRef = useRef<HTMLSpanElement>(null);
useEffect(() => {
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && !hasStarted) {
setHasStarted(true);
}
});
if (elementRef.current) {
observer.observe(elementRef.current);
}
return () => observer.disconnect();
}, [hasStarted]);
useEffect(() => {
if (!hasStarted) return;
let startTime: number | null = null;
const animate = (currentTime: number) => {
if (!startTime) startTime = currentTime;
const progress = Math.min((currentTime - startTime) / duration, 1);
// Ease out cubic function for smooth deceleration
const easeOut = 1 - Math.pow(1 - progress, 3);
const currentCount = Math.floor(easeOut * end);
setCount(currentCount);
if (progress < 1) {
requestAnimationFrame(animate);
}
};
requestAnimationFrame(animate);
}, [end, duration, hasStarted]);
return <span ref={elementRef}>{count}{suffix}</span>;
}