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 rotateX = ((y - rect.height / 2) / (rect.height / 2)) * -25; const rotateY = ((x - rect.width / 2) / (rect.width / 2)) * 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)", border: "1px solid rgba(255,255,255,0.1)" }} > {/* Glare Layer */} <div style={{ position: "absolute", inset: 0, zIndex: 10, pointerEvents: "none", transition: "background 0.1s ease-out", background: glareBg, borderRadius: "inherit" }} /> {/* 3D Floating Text Layer */} <div style={{ position: "absolute", bottom: "30px", left: "20px", transform: "translateZ(50px)", color: "white", pointerEvents: "none", textShadow: "0 2px 10px rgba(0,0,0,0.8)" }}> <h3 style={{ margin: 0, fontSize: "24px", fontWeight: 800 }}>Harkawal AI</h3> <p style={{ margin: 0, fontSize: "14px", opacity: 0.9 }}>3D Parallax Output</p> </div> </div> ); }