"use client"; import type { PointerEvent, ReactNode } from "react"; import { useCallback, useEffect, useRef, useState } from "react"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; import { MathUtils, type Mesh } from "three"; type LensTarget = { x: number; y: number; active: boolean; }; type FocusLensCursorProps = { children: ReactNode; size?: number; lensColor?: string; intensity?: number; hideNativeCursor?: boolean; fallback?: ReactNode; forceFallback?: boolean; /** Forces reduced motion: the lens stays off and the content is left untouched. */ reducedMotion?: boolean; className?: string; }; function ContextMonitor({ onLost, onReady }: { onLost: () => void; onReady: () => void }) { const renderer = useThree((state) => state.gl); useEffect(() => { const canvas = renderer.domElement; const handleLost = (event: Event) => { event.preventDefault(); onLost(); }; canvas.addEventListener("webglcontextlost", handleLost); onReady(); return () => canvas.removeEventListener("webglcontextlost", handleLost); }, [onLost, onReady, renderer]); return null; } function WebglFailureFallback({ onUnavailable }: { onUnavailable: () => void }) { useEffect(() => onUnavailable(), [onUnavailable]); return null; } function GlassLens({ target, size, lensColor, intensity, }: { target: React.RefObject; size: number; lensColor: string; intensity: number; }) { const mesh = useRef(null); const { gl, viewport } = useThree(); useFrame((_, delta) => { if (!mesh.current) return; const lens = target.current; const width = Math.max(1, gl.domElement.clientWidth); const worldRadius = ((size / width) * viewport.width) / 2; const nextX = lens.x * viewport.width * 0.5; const nextY = lens.y * viewport.height * 0.5; const nextScale = lens.active ? worldRadius : worldRadius * 0.82; mesh.current.position.x = MathUtils.damp(mesh.current.position.x, nextX, 14, delta); mesh.current.position.y = MathUtils.damp(mesh.current.position.y, nextY, 14, delta); mesh.current.scale.x = MathUtils.damp(mesh.current.scale.x, nextScale, 16, delta); mesh.current.scale.y = MathUtils.damp(mesh.current.scale.y, nextScale, 16, delta); mesh.current.scale.z = MathUtils.damp(mesh.current.scale.z, nextScale, 16, delta); mesh.current.rotation.x += delta * 0.24; mesh.current.rotation.y += delta * 0.34; }); return ( <> ); } function DefaultFallback({ size }: { size: number }) { return ( ); } export function FocusLensCursor({ children, size = 96, lensColor = "#b96f4b", intensity = 0.65, hideNativeCursor = false, fallback, forceFallback = false, reducedMotion = false, className = "", }: FocusLensCursorProps) { const root = useRef(null); const target = useRef({ x: 0, y: 0, active: false }); const [active, setActive] = useState(false); const [enabled, setEnabled] = useState(false); const [canvasReady, setCanvasReady] = useState(false); const [webglFailed, setWebglFailed] = useState(false); const amount = Math.min(1, Math.max(0, intensity)); const handleReady = useCallback(() => setCanvasReady(true), []); const handleLost = useCallback(() => { setCanvasReady(false); setWebglFailed(true); }, []); useEffect(() => { const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)"); const coarsePointer = window.matchMedia("(pointer: coarse)"); const disable = () => { if (!reduceMotion.matches && !coarsePointer.matches) return; target.current.active = false; setActive(false); setCanvasReady(false); setEnabled(false); }; reduceMotion.addEventListener("change", disable); coarsePointer.addEventListener("change", disable); return () => { reduceMotion.removeEventListener("change", disable); coarsePointer.removeEventListener("change", disable); }; }, []); function canInteract(event: PointerEvent) { return !reducedMotion && event.pointerType !== "touch" && window.matchMedia("(pointer: fine)").matches && !window.matchMedia("(prefers-reduced-motion: reduce)").matches; } function move(event: PointerEvent) { if (!canInteract(event)) return; const rect = event.currentTarget.getBoundingClientRect(); event.currentTarget.style.setProperty("--lens-x", event.clientX - rect.left + "px"); event.currentTarget.style.setProperty("--lens-y", event.clientY - rect.top + "px"); target.current.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; target.current.y = -(((event.clientY - rect.top) / rect.height) * 2 - 1); } function enter(event: PointerEvent) { if (!canInteract(event)) return; target.current.active = true; setActive(true); if (!forceFallback && !webglFailed) setEnabled(true); } function leave() { target.current.active = false; setActive(false); } const showCanvas = enabled && !reducedMotion && !forceFallback && !webglFailed; const showFallback = active && !reducedMotion && (!canvasReady || forceFallback || webglFailed); return (

{children} {showCanvas ? ( ) : null}

); }