g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
NotII
2025-04-08 01:54:20 +01:00
parent c85af30518
commit 2011a33c4d
6 changed files with 121 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/3d/StatCard.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useState, useRef, useEffect } from 'react';
import { useState, useRef } from 'react';
import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion';
interface StatCardProps {
@@ -11,8 +11,7 @@ interface StatCardProps {
export default function StatCard({ title, value, className = "" }: StatCardProps) {
const cardRef = useRef<HTMLDivElement>(null);
const [rotateX, setRotateX] = useState(0);
const [rotateY, setRotateY] = useState(0);
const [isHovered, setIsHovered] = useState(false);
const x = useMotionValue(0);
const y = useMotionValue(0);
@@ -22,8 +21,8 @@ export default function StatCard({ title, value, className = "" }: StatCardProps
const springY = useSpring(y, { stiffness: 150, damping: 20 });
// Transform mouse movement to rotation values
const rotateXOutput = useTransform(springY, [-0.5, 0.5], ["10deg", "-10deg"]);
const rotateYOutput = useTransform(springX, [-0.5, 0.5], ["-10deg", "10deg"]);
const rotateXOutput = useTransform(springY, [-0.5, 0.5], ["7deg", "-7deg"]);
const rotateYOutput = useTransform(springX, [-0.5, 0.5], ["-7deg", "7deg"]);
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
if (!cardRef.current) return;
@@ -39,17 +38,23 @@ export default function StatCard({ title, value, className = "" }: StatCardProps
y.set(mouseY - 0.5);
};
const handleMouseEnter = () => {
setIsHovered(true);
};
const handleMouseLeave = () => {
// Reset to neutral position when mouse leaves
x.set(0);
y.set(0);
setIsHovered(false);
};
return (
<motion.div
ref={cardRef}
className={`relative overflow-hidden rounded-xl p-8 bg-gradient-to-br from-gray-800 to-gray-900 backdrop-blur-sm border border-gray-700/50 shadow-xl flex flex-col justify-center ${className}`}
className={`relative overflow-hidden rounded-xl p-6 sm:p-8 bg-gradient-to-br from-gray-800/90 to-gray-900/90 border border-gray-700/50 shadow-lg flex flex-col justify-center group ${className}`}
onMouseMove={handleMouseMove}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
style={{
rotateX: rotateXOutput,
@@ -60,16 +65,21 @@ export default function StatCard({ title, value, className = "" }: StatCardProps
transition={{ duration: 0.2 }}
>
{/* Ambient light reflection */}
<div className="absolute inset-0 w-full h-full bg-gradient-to-tr from-pink-500/10 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
<div
className={`absolute inset-0 w-full h-full bg-gradient-to-tr from-pink-500/10 to-purple-500/5 transition-opacity duration-300 ${isHovered ? 'opacity-100' : 'opacity-0'}`}
/>
{/* Main content with 3D effect */}
<div style={{ transform: "translateZ(20px)" }} className="relative z-10">
<p className="text-gray-400 text-sm mb-1 font-medium">{title}</p>
<p className="text-3xl md:text-4xl font-bold text-white">{value}</p>
<p className="text-gray-400 text-xs sm:text-sm mb-1 font-medium">{title}</p>
<p className="text-2xl sm:text-3xl md:text-4xl font-bold text-white">{value}</p>
</div>
{/* Shiny edge */}
{/* Shiny shimmer effect */}
<div className="absolute inset-0 rounded-xl overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-pink-500/10 to-transparent opacity-0 group-hover:opacity-100 animate-shimmer" />
<div
className={`absolute inset-0 w-[200%] bg-gradient-to-r from-transparent via-pink-500/20 to-transparent -translate-x-[100%] animate-shimmer transition-opacity duration-300 ${isHovered ? 'opacity-100' : 'opacity-0'}`}
/>
</div>
</motion.div>
);