Cursor

1"use client";
2 
3import * as React from "react";
4import {
5  motion,
6  useMotionValue,
7  useSpring,
8  AnimatePresence,
9  type HTMLMotionProps,
10  type SpringOptions,
11} from "motion/react";
12 
13import { getStrictContext } from "@/lib/get-strict-context";
14import { Slot, type WithAsChild } from "@/components/unlumen-ui/primitives/slot";
15 
16type CursorContextType = {
17  cursorPos: { x: number; y: number };
18  active: boolean;
19  global: boolean;
20  containerRef: React.RefObject<HTMLDivElement | null>;
21  cursorRef: React.RefObject<HTMLDivElement | null>;
22};
23 
24const [LocalCursorProvider, useCursor] =
25  getStrictContext<CursorContextType>("CursorContext");
26 
27type CursorProviderProps = {
28  children: React.ReactNode;
29  global?: boolean;
30};
31 
32function CursorProvider({ children, global = false }: CursorProviderProps) {
33  const [cursorPos, setCursorPos] = React.useState({ x: 0, y: 0 });
34  const [active, setActive] = React.useState(false);
35 
36  const containerRef = React.useRef<HTMLDivElement>(null);
37  const cursorRef = React.useRef<HTMLDivElement>(null);
38 
39  React.useEffect(() => {
40    const id = "__cursor_none_style__";
41    if (document.getElementById(id)) return;
42 
43    const style = document.createElement("style");
44    style.id = id;
45    style.textContent = `
46      .animate-ui-cursor-none, .animate-ui-cursor-none * { cursor: none !important; }
47    `;
48    document.head.appendChild(style);
49  }, []);
50 
51  React.useEffect(() => {
52    let removeListeners: () => void;
53 
54    if (global) {
55      const handlePointerMove = (e: PointerEvent) => {
56        setCursorPos({ x: e.clientX, y: e.clientY });
57        setActive(true);
58      };
59 
60      const handlePointerOut = (e: PointerEvent | MouseEvent) => {
61        if (e instanceof PointerEvent && e.relatedTarget === null) {
62          setActive(false);
63        }
64      };
65 
66      const handleVisibilityChange = () => {
67        if (document.visibilityState === "hidden") setActive(false);
68      };
69 
70      window.addEventListener("pointermove", handlePointerMove, {
71        passive: true,
72      });
73      window.addEventListener("pointerout", handlePointerOut, {
74        passive: true,
75      });
76      window.addEventListener("mouseout", handlePointerOut, { passive: true });
77      document.addEventListener("visibilitychange", handleVisibilityChange);
78 
79      removeListeners = () => {
80        window.removeEventListener("pointermove", handlePointerMove);
81        window.removeEventListener("pointerout", handlePointerOut);
82// … truncated