Cursor Bubble

1/** biome-ignore-all lint/a11y/noNoninteractiveElementInteractions: The target wraps its own interactive child; the span only needs hover affordances. */
2/** biome-ignore-all lint/a11y/noStaticElementInteractions: Same as above — hover-only, no keyboard/click semantics of its own. */
3 
4"use client";
5 
6import { useGSAP } from "@gsap/react";
7import { cn } from "@/lib/utils";
8import gsap from "gsap";
9import {
10  type ComponentPropsWithoutRef,
11  createContext,
12  type ReactNode,
13  useContext,
14  useEffect,
15  useMemo,
16  useRef,
17  useState,
18} from "react";
19import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";
20 
21const DEFAULT_LABEL = "click";
22const CURSOR_OFFSET_X = 13;
23const CURSOR_OFFSET_Y = -43;
24const FOLLOW_DURATION = 0.5;
25const POP_IN_DURATION = 1.7;
26const POP_IN_DELAY = 0.1;
27const POP_OUT_DURATION = 0.3;
28const RESTING_ROTATION = -30;
29 
30interface CursorBubbleContextValue {
31  hide: () => void;
32  show: (label: string) => void;
33}
34 
35const CursorBubbleContext = createContext<CursorBubbleContextValue | null>(
36  null
37);
38 
39function useCursorBubbleContext() {
40  const context = useContext(CursorBubbleContext);
41 
42  if (!context) {
43    throw new Error(
44      "CursorBubbleTarget must be used within a CursorBubble provider."
45    );
46  }
47 
48  return context;
49}
50 
51function useCoarsePointer() {
52  const [isCoarsePointer, setIsCoarsePointer] = useState(false);
53 
54  useEffect(() => {
55    const mediaQuery = window.matchMedia("(pointer: coarse)");
56 
57    const update = () => {
58      setIsCoarsePointer(mediaQuery.matches);
59    };
60 
61    update();
62    mediaQuery.addEventListener("change", update);
63 
64    return () => {
65      mediaQuery.removeEventListener("change", update);
66    };
67  }, []);
68 
69  return isCoarsePointer;
70}
71 
72export interface CursorBubbleProps
73  extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
74  /** Extra classes applied to the floating bubble itself (color, padding, shape, etc). */
75  bubbleClassName?: string;
76  children?: ReactNode;
77}
78 
79function CursorBubble({
80  bubbleClassName,
81  children,
82  className,
83  ...props
84}: CursorBubbleProps) {
85  const bubbleRef = useRef<HTMLDivElement>(null);
86  const showRef = useRef<(label: string) => void>(() => undefined);
87  const hideRef = useRef<() => void>(() => undefined);
88  const prefersReducedMotion = usePrefersReducedMotion();
89  const isCoarsePointer = useCoarsePointer();
90  const disabled = prefersReducedMotion || isCoarsePointer;
91 
92  useGSAP(
93    () => {
94      const bubble = bubbleRef.current;
95// … truncated