"use client"; import type { HTMLAttributes, PointerEvent, ReactNode } from "react"; import { useRef } from "react"; import gsap from "gsap"; import { useGSAP } from "@gsap/react"; gsap.registerPlugin(useGSAP); type GlareTrackingCardProps = HTMLAttributes & { children: ReactNode; glareColor?: string; intensity?: number; /** Forces the static presentation regardless of the OS setting. */ reducedMotion?: boolean; }; export function GlareTrackingCard({ children, glareColor = "rgba(220,240,228,.32)", intensity = 12, reducedMotion = false, className = "", onPointerMove, onPointerLeave, onBlur, ...props }: GlareTrackingCardProps) { const root = useRef(null); const glare = useRef(null); const handlers = useRef<{ move?: (event: globalThis.PointerEvent) => void; leave?: () => void }>({}); useGSAP((_, contextSafe) => { const node = root.current; const light = glare.current; if (!node || !light || !contextSafe || reducedMotion) return; const fine = window.matchMedia("(pointer: fine)"); const reduce = window.matchMedia("(prefers-reduced-motion: reduce)"); const rotateX = gsap.quickTo(node, "rotationX", { duration: 0.34, ease: "power3.out" }); const rotateY = gsap.quickTo(node, "rotationY", { duration: 0.34, ease: "power3.out" }); const x = gsap.quickTo(light, "xPercent", { duration: 0.22, ease: "power2.out" }); const y = gsap.quickTo(light, "yPercent", { duration: 0.22, ease: "power2.out" }); const opacity = gsap.quickTo(light, "opacity", { duration: 0.2, ease: "power2.out" }); const move = contextSafe((event: globalThis.PointerEvent) => { if (!fine.matches || reduce.matches || event.pointerType === "touch") return; const rect = node.getBoundingClientRect(); if (!rect.width || !rect.height) return; const px = (event.clientX - rect.left) / rect.width; const py = (event.clientY - rect.top) / rect.height; rotateX((0.5 - py) * intensity); rotateY((px - 0.5) * intensity); x(px * 100 - 50); y(py * 100 - 50); opacity(1); }); const leave = contextSafe(() => { rotateX(0); rotateY(0); opacity(0); }); handlers.current = { move, leave }; return () => { handlers.current = {}; gsap.killTweensOf([node, light]); }; }, { scope: root, dependencies: [intensity, reducedMotion], revertOnUpdate: true }); const move = (event: PointerEvent) => { handlers.current.move?.(event.nativeEvent); onPointerMove?.(event); }; return (

{ handlers.current.leave?.(); onPointerLeave?.(event); }} onBlur={(event) => { handlers.current.leave?.(); onBlur?.(event); }} className={"relative isolate overflow-hidden rounded-[1.75rem] border border-white/10 bg-[#111513] p-7 text-white [transform-style:preserve-3d] " + className} {...props} >

); }