Spaces:
Running
Running
File size: 1,770 Bytes
1f74aa2 deb8696 1f74aa2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 'use client';
import { useRef, useState } from 'react';
import { useReducedMotion } from 'framer-motion';
interface TiltCardProps {
children: React.ReactNode;
className?: string;
maxTilt?: number;
}
/**
* Cursor-tracking 3D tilt card with a spotlight that follows the pointer.
* Disabled for users who prefer reduced motion.
*/
export function TiltCard({ children, className = '', maxTilt = 6 }: TiltCardProps) {
const ref = useRef<HTMLDivElement>(null);
const reduceMotion = useReducedMotion();
const [style, setStyle] = useState<{ transform?: string; spotlight?: string }>({});
function handleMove(e: React.MouseEvent<HTMLDivElement>) {
if (reduceMotion || !ref.current) return;
const rect = ref.current.getBoundingClientRect();
const px = (e.clientX - rect.left) / rect.width;
const py = (e.clientY - rect.top) / rect.height;
const rotateY = (px - 0.5) * 2 * maxTilt;
const rotateX = -(py - 0.5) * 2 * maxTilt;
setStyle({
transform: `perspective(900px) rotateX(${rotateX.toFixed(2)}deg) rotateY(${rotateY.toFixed(2)}deg)`,
spotlight: `radial-gradient(420px circle at ${px * 100}% ${py * 100}%, rgba(74,222,128,0.10), transparent 65%)`,
});
}
function handleLeave() {
if (reduceMotion) return;
setStyle({});
}
return (
<div
ref={ref}
onMouseMove={handleMove}
onMouseLeave={handleLeave}
className={`relative ${className}`}
style={{ transform: style.transform, transition: 'transform 150ms ease-out' }}
>
<div
className="pointer-events-none absolute inset-0 rounded-2xl"
style={{ background: style.spotlight, opacity: style.spotlight ? 1 : 0, transition: 'opacity 150ms ease-out' }}
/>
{children}
</div>
);
}
|