{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "noise-gradient",
  "type": "registry:component",
  "title": "NoiseGradient",
  "description": "A slowly morphing four-point mesh gradient — the lightweight, mobile-safe alternative to a WebGL shader background. Pure CSS.",
  "dependencies": [],
  "registryDependencies": [],
  "tier": "free",
  "note": "Requires the .prism-meshgrad styles from globals.css.",
  "files": [
    {
      "path": "components/prism/NoiseGradient.tsx",
      "content": "/**\n * NoiseGradient — a slowly morphing four-point mesh gradient, pure CSS (no WebGL).\n * The lightweight, mobile-safe alternative to ShaderField for hero/section\n * backgrounds. Add film grain by wrapping in a `.grain` element. Pass any palette.\n *\n * Render it absolutely-positioned behind content (it fills its positioned parent).\n */\nexport function NoiseGradient({\n  className = \"\",\n  colors = [\"#8b5cff\", \"#1fd4e6\", \"#ff3d81\", \"#ffb24d\"],\n}: {\n  className?: string;\n  colors?: [string, string, string, string];\n}) {\n  return (\n    <div\n      aria-hidden\n      className={`prism-meshgrad ${className}`}\n      style={\n        {\n          \"--mg-1\": colors[0],\n          \"--mg-2\": colors[1],\n          \"--mg-3\": colors[2],\n          \"--mg-4\": colors[3],\n        } as React.CSSProperties\n      }\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "components/prism/NoiseGradient.tsx"
    }
  ]
}