"use client"; import React, { useState, useRef } from "react"; const TiltCard = () => { const [rotation, setRotation] = useState({ rotateX: 0, rotateY: 0 }); const cardRef = useRef(null); const MAX_ROTATION = 18; const handleMouseMove = (e: React.MouseEvent) => { if (!cardRef.current) return; const { offsetWidth: width, offsetHeight: height } = cardRef.current; const { offsetX: x, offsetY: y } = e.nativeEvent; const normalizedX = x / width - 0.5; const normalizedY = y / height - 0.5; const rotateY = -normalizedX * 2 * MAX_ROTATION; const rotateX = normalizedY * 2 * MAX_ROTATION; setRotation({ rotateX, rotateY }); }; const handleMouseLeave = () => { setRotation({ rotateX: 0, rotateY: 0 }); }; const cardStyle = { transform: \` perspective(1200px) rotateX(\${rotation.rotateX}deg) rotateY(\${rotation.rotateY}deg) scale(1.05) \`, transition: "transform 0.2s ease-out", boxShadow: rotation.rotateX !== 0 || rotation.rotateY !== 0 ? \`\${-rotation.rotateY}px \${rotation.rotateX}px 40px rgba(0,0,0,0.45), 0 0 30px rgba(59,130,246,0.6)\` : "0 20px 35px rgba(0,0,0,0.35)", }; const unsplashImage = "https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?q=80&w=1000&auto=format&fit=crop"; return (

3D Vision

A premium cinematic 3D hover card built with React + Tailwind + transforms.

); }; export default TiltCard;