{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gradient-mesh",
  "title": "Cursor Gradient",
  "description": "An animated color mesh with a luminous pointer-following field.",
  "registryDependencies": [
    "@rivelle/utils"
  ],
  "files": [
    {
      "path": "registry/nova/effects/gradient-mesh.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype GradientMeshProps = React.ComponentProps<\"div\"> & {\n  followPointer?: boolean;\n  speed?: \"slow\" | \"normal\";\n};\n\nfunction GradientMesh({\n  children,\n  className,\n  followPointer = true,\n  onPointerLeave,\n  onPointerMove,\n  speed = \"normal\",\n  style,\n  ...props\n}: GradientMeshProps) {\n  const frame = React.useRef<number | null>(null);\n\n  const setPosition = (element: HTMLDivElement, x: number, y: number) => {\n    if (frame.current !== null) cancelAnimationFrame(frame.current);\n    frame.current = requestAnimationFrame(() => {\n      element.style.setProperty(\"--mesh-x\", `${x}%`);\n      element.style.setProperty(\"--mesh-y\", `${y}%`);\n    });\n  };\n\n  React.useEffect(\n    () => () => {\n      if (frame.current !== null) cancelAnimationFrame(frame.current);\n    },\n    [],\n  );\n\n  return (\n    <div\n      className={cn(\n        \"relative isolate overflow-hidden rounded-[2.25rem] border border-foreground/10 bg-background text-foreground shadow-[0_40px_120px_-70px_var(--foreground)]\",\n        className,\n      )}\n      data-slot=\"gradient-mesh\"\n      onPointerLeave={(event) => {\n        setPosition(event.currentTarget, 50, 50);\n        onPointerLeave?.(event);\n      }}\n      onPointerMove={(event) => {\n        if (\n          followPointer &&\n          !window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n        ) {\n          const bounds = event.currentTarget.getBoundingClientRect();\n          setPosition(\n            event.currentTarget,\n            ((event.clientX - bounds.left) / bounds.width) * 100,\n            ((event.clientY - bounds.top) / bounds.height) * 100,\n          );\n        }\n        onPointerMove?.(event);\n      }}\n      style={\n        {\n          \"--mesh-x\": \"50%\",\n          \"--mesh-y\": \"50%\",\n          ...style,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      <div\n        aria-hidden=\"true\"\n        className={cn(\n          \"absolute inset-[-45%] opacity-65 blur-3xl\",\n          speed === \"slow\"\n            ? \"motion-safe:animate-[spin_30s_linear_infinite]\"\n            : \"motion-safe:animate-[spin_18s_linear_infinite]\",\n        )}\n        style={{\n          background:\n            \"conic-gradient(from 35deg at 50% 50%, transparent 0deg, color-mix(in oklch, var(--primary) 74%, transparent) 62deg, transparent 128deg, color-mix(in oklch, var(--accent) 62%, transparent) 214deg, transparent 286deg, color-mix(in oklch, var(--chart-3) 55%, transparent) 340deg, transparent 360deg)\",\n        }}\n      />\n      <div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-0 opacity-90 transition-opacity duration-500\"\n        style={{\n          background:\n            \"radial-gradient(420px circle at var(--mesh-x) var(--mesh-y), color-mix(in oklch, var(--primary) 48%, transparent), transparent 62%)\",\n        }}\n      />\n      <div\n        aria-hidden=\"true\"\n        className=\"absolute -left-[15%] top-[8%] size-[58%] rounded-full bg-primary/20 blur-[80px] motion-safe:animate-[pulse_7s_ease-in-out_infinite]\"\n      />\n      <div\n        aria-hidden=\"true\"\n        className=\"absolute -bottom-[20%] right-[-8%] size-[64%] rounded-full bg-accent/25 blur-[90px] motion-safe:animate-[pulse_9s_ease-in-out_infinite]\"\n      />\n      <div\n        aria-hidden=\"true\"\n        className=\"absolute inset-0 opacity-[.035]\"\n        style={{\n          backgroundImage:\n            \"url(\\\"data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E\\\")\",\n        }}\n      />\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  );\n}\n\nexport { GradientMesh };\nexport type { GradientMeshProps };\n",
      "type": "registry:ui",
      "target": "@effects/gradient-mesh.tsx"
    }
  ],
  "type": "registry:ui"
}