3D Parallax Studio

import React, { useRef, useState } from 'react'; export default function ParallaxCard() { const cardRef = useRef(null); const [transform, setTransform] = useState("perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"); const [glareBg, setGlareBg] = useState("transparent"); const handleMouseMove = (e) => { if (!cardRef.current) return; const rect = cardRef.current.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const rotateX = ((y - centerY) / centerY) * -25; const rotateY = ((x - centerX) / centerX) * 25; setTransform(`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`); const glareX = (x / rect.width) * 100; const glareY = (y / rect.height) * 100; setGlareBg(`radial-gradient(circle at ${glareX}% ${glareY}%, rgba(255,255,255,0.4) 0%, transparent 60%)`); }; const handleMouseLeave = () => { setTransform("perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"); setGlareBg("transparent"); }; return ( <div ref={cardRef} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave} style={{ width: "300px", height: "400px", borderRadius: "20px", backgroundImage: "url('" + (bgImage.length > 200 ? "YOUR_IMAGE_URL" : bgImage) + "')", backgroundSize: "cover", backgroundPosition: "center", position: "relative", transformStyle: "preserve-3d", transition: "transform 0.1s ease-out", transform, boxShadow: "0 20px 50px rgba(0,0,0,0.5)", overflow: "hidden" }} > <div style={{ position: "absolute", inset: 0, zIndex: 10, pointerEvents: "none", transition: "background 0.1s ease-out", background: glareBg }} /> <div style={{ position: "absolute", bottom: "30px", left: "20px", transform: "translateZ(50px)", color: "white" }}> <h3 style={{ margin: 0, fontSize: "24px" }}>3D Parallax</h3> <p style={{ margin: 0 }}>Hover to interact</p> </div> </div> ); }