Cursor

1import * as React from "react";
2import {
3  motion,
4  useMotionValue,
5  useSpring,
6  useVelocity,
7  useTransform,
8} from "motion/react";
9 
10import {
11  CursorProvider as CursorProviderPrimitive,
12  Cursor as CursorPrimitive,
13  CursorFollow as CursorFollowPrimitive,
14  CursorContainer as CursorContainerPrimitive,
15  useCursor,
16  type CursorProviderProps as CursorProviderPropsPrimitive,
17  type CursorContainerProps as CursorContainerPropsPrimitive,
18  type CursorProps as CursorPropsPrimitive,
19  type CursorFollowProps as CursorFollowPropsPrimitive,
20} from "@/components/unlumen-ui/primitives/cursor-primitive";
21import { cn } from "@/lib/utils";
22 
23type CursorProviderProps = Omit<CursorProviderPropsPrimitive, "children"> &
24  CursorContainerPropsPrimitive;
25 
26function CursorProvider({ global, ...props }: CursorProviderProps) {
27  return (
28    <CursorProviderPrimitive global={global}>
29      <CursorContainerPrimitive {...props} />
30    </CursorProviderPrimitive>
31  );
32}
33 
34type CursorProps = Omit<CursorPropsPrimitive, "children" | "asChild">;
35 
36function Cursor({ className, ...props }: CursorProps) {
37  const { cursorPos } = useCursor();
38  const x = useMotionValue(0);
39  const y = useMotionValue(0);
40 
41  React.useEffect(() => {
42    x.set(cursorPos.x);
43    y.set(cursorPos.y);
44  }, [cursorPos, x, y]);
45 
46  const springConfig = { damping: 25, stiffness: 300 };
47  const smoothX = useSpring(x, springConfig);
48  const smoothY = useSpring(y, springConfig);
49 
50  const velocityX = useVelocity(smoothX);
51  const velocityY = useVelocity(smoothY);
52 
53  // tilt the cursor based on velocity for a gravity feel
54  const rotateVelocity = useTransform([velocityX, velocityY], ([vx, vy]) => {
55    const rx = ((vx as number) / 1000) * 30;
56    const ry = ((vy as number) / 1000) * 30;
57    return Math.max(-45, Math.min(45, rx + ry));
58  });
59  const rotate = useSpring(rotateVelocity, { damping: 15, stiffness: 200 });
60 
61  const scale = useTransform([velocityX, velocityY], ([vx, vy]) => {
62    const velocity = Math.sqrt((vx as number) ** 2 + (vy as number) ** 2);
63    return 1 - Math.min(velocity / 2000, 0.1);
64  });
65 
66  return (
67    <CursorPrimitive
68      style={{
69        top: smoothY,
70        left: smoothX,
71        transform: "translate(-4.5%, -11%)", // Override default centering to align tip
72      }}
73      {...props}
74    >
75      <motion.svg
76        className={cn("size-6 text-foreground", className)}
77        xmlns="http://www.w3.org/2000/svg"
78        viewBox="0 0 40 40"
79        style={{
80          rotate,
81          scale,
82// … truncated