"use client"; import type { CSSProperties, PointerEvent } from "react"; import { useRef } from "react"; import { Icon } from "@/components/icons"; type StageStyle = CSSProperties & { "--pointer-x": string; "--pointer-y": string; }; export function HeroIllustration() { const stageRef = useRef(null); const updateParallax = (event: PointerEvent) => { const stage = stageRef.current; if (!stage || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const bounds = stage.getBoundingClientRect(); const x = ((event.clientX - bounds.left) / bounds.width - 0.5) * 2; const y = ((event.clientY - bounds.top) / bounds.height - 0.5) * 2; stage.style.setProperty("--pointer-x", x.toFixed(3)); stage.style.setProperty("--pointer-y", y.toFixed(3)); }; const resetParallax = () => { stageRef.current?.style.setProperty("--pointer-x", "0"); stageRef.current?.style.setProperty("--pointer-y", "0"); }; return (
); }