feat: add AnimatedCounter component and update stats section with hero asset color adjustment
This commit is contained in:
@@ -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 */}
|
||||
|
||||
45
src/components/ui/AnimatedCounter.tsx
Normal file
45
src/components/ui/AnimatedCounter.tsx
Normal 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>;
|
||||
}
|
||||
Reference in New Issue
Block a user