Cursor Gradient

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6 
7type GradientMeshProps = React.ComponentProps<"div"> & {
8  followPointer?: boolean;
9  speed?: "slow" | "normal";
10};
11 
12function GradientMesh({
13  children,
14  className,
15  followPointer = true,
16  onPointerLeave,
17  onPointerMove,
18  speed = "normal",
19  style,
20  ...props
21}: GradientMeshProps) {
22  const frame = React.useRef<number | null>(null);
23 
24  const setPosition = (element: HTMLDivElement, x: number, y: number) => {
25    if (frame.current !== null) cancelAnimationFrame(frame.current);
26    frame.current = requestAnimationFrame(() => {
27      element.style.setProperty("--mesh-x", `${x}%`);
28      element.style.setProperty("--mesh-y", `${y}%`);
29    });
30  };
31 
32  React.useEffect(
33    () => () => {
34      if (frame.current !== null) cancelAnimationFrame(frame.current);
35    },
36    [],
37  );
38 
39  return (
40    <div
41      className={cn(
42        "relative isolate overflow-hidden rounded-[2.25rem] border border-foreground/10 bg-background text-foreground shadow-[0_40px_120px_-70px_var(--foreground)]",
43        className,
44      )}
45      data-slot="gradient-mesh"
46      onPointerLeave={(event) => {
47        setPosition(event.currentTarget, 50, 50);
48        onPointerLeave?.(event);
49      }}
50      onPointerMove={(event) => {
51        if (
52          followPointer &&
53          !window.matchMedia("(prefers-reduced-motion: reduce)").matches
54        ) {
55          const bounds = event.currentTarget.getBoundingClientRect();
56          setPosition(
57            event.currentTarget,
58            ((event.clientX - bounds.left) / bounds.width) * 100,
59            ((event.clientY - bounds.top) / bounds.height) * 100,
60          );
61        }
62        onPointerMove?.(event);
63      }}
64      style={
65        {
66          "--mesh-x": "50%",
67          "--mesh-y": "50%",
68          ...style,
69        } as React.CSSProperties
70      }
71      {...props}
72    >
73      <div
74        aria-hidden="true"
75        className={cn(
76          "absolute inset-[-45%] opacity-65 blur-3xl",
77          speed === "slow"
78            ? "motion-safe:animate-[spin_30s_linear_infinite]"
79            : "motion-safe:animate-[spin_18s_linear_infinite]",
80        )}
81        style={{
82          background:
83// … truncated