{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mesh-backdrop",
  "title": "Mesh Backdrop",
  "description": "Layered radial-gradient grounds with optional film grain and slow convection. Six presets sampled from the reference frames.",
  "registryDependencies": [
    "http://localhost:5173/r/liquid-theme.json"
  ],
  "files": [
    {
      "path": "src/components/ui/mesh-backdrop.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Glass has nothing to refract without a scene behind it. Each preset is a\n * mesh sampled from one of the reference frames, so the components can be\n * shown in the light they were designed for.\n */\nexport const MESH_PRESETS = {\n  /** Dusty plum / mauve — the GCT Balance frame. */\n  plum: {\n    base: \"#4a3145\",\n    stops: [\n      \"radial-gradient(70% 60% at 10% 12%, rgb(158 104 128 / 0.95) 0%, rgb(158 104 128 / 0) 62%)\",\n      \"radial-gradient(65% 70% at 88% 8%, rgb(186 130 136 / 0.9) 0%, rgb(186 130 136 / 0) 60%)\",\n      \"radial-gradient(80% 75% at 78% 95%, rgb(44 26 42 / 0.98) 0%, rgb(44 26 42 / 0) 62%)\",\n      \"radial-gradient(60% 55% at 26% 88%, rgb(206 156 160 / 0.85) 0%, rgb(206 156 160 / 0) 60%)\",\n      \"radial-gradient(50% 45% at 52% 46%, rgb(120 74 100 / 0.7) 0%, rgb(120 74 100 / 0) 70%)\",\n    ],\n    scheme: \"dark\" as const,\n  },\n  /** Cream ground with a cold violet figure — the Average Glucose frame. */\n  bloom: {\n    base: \"#d9d3c6\",\n    stops: [\n      \"radial-gradient(62% 85% at 16% 46%, rgb(28 16 44 / 0.98) 0%, rgb(28 16 44 / 0) 58%)\",\n      \"radial-gradient(45% 55% at 2% 72%, rgb(96 214 160 / 0.9) 0%, rgb(96 214 160 / 0) 62%)\",\n      \"radial-gradient(55% 60% at 92% 92%, rgb(38 46 190 / 0.95) 0%, rgb(38 46 190 / 0) 58%)\",\n      \"radial-gradient(40% 50% at 74% 66%, rgb(126 78 190 / 0.7) 0%, rgb(126 78 190 / 0) 62%)\",\n      \"radial-gradient(50% 45% at 66% 8%, rgb(226 222 210 / 0.95) 0%, rgb(226 222 210 / 0) 66%)\",\n    ],\n    scheme: \"dark\" as const,\n  },\n  /** Acid olive over near-black — the GLUCOSE 149 frame. */\n  olive: {\n    base: \"#12130a\",\n    stops: [\n      \"radial-gradient(58% 55% at 80% 22%, rgb(238 240 138 / 0.95) 0%, rgb(238 240 138 / 0) 58%)\",\n      \"radial-gradient(62% 60% at 12% 78%, rgb(178 186 84 / 0.9) 0%, rgb(178 186 84 / 0) 58%)\",\n      \"radial-gradient(70% 65% at 48% 48%, rgb(12 13 8 / 0.92) 0%, rgb(12 13 8 / 0) 62%)\",\n      \"radial-gradient(40% 38% at 92% 84%, rgb(206 210 120 / 0.55) 0%, rgb(206 210 120 / 0) 62%)\",\n    ],\n    scheme: \"dark\" as const,\n  },\n  /** Warm ivory with an amber bloom — the creditkarma dashboard ground. */\n  ivory: {\n    base: \"#eeece5\",\n    stops: [\n      \"radial-gradient(52% 68% at 46% 42%, rgb(244 166 40 / 0.92) 0%, rgb(244 166 40 / 0) 55%)\",\n      \"radial-gradient(38% 48% at 62% 70%, rgb(232 92 40 / 0.75) 0%, rgb(232 92 40 / 0) 58%)\",\n      \"radial-gradient(55% 55% at 88% 16%, rgb(178 192 158 / 0.8) 0%, rgb(178 192 158 / 0) 60%)\",\n      \"radial-gradient(48% 52% at 6% 84%, rgb(214 208 190 / 0.95) 0%, rgb(214 208 190 / 0) 62%)\",\n      \"radial-gradient(30% 34% at 30% 20%, rgb(248 246 240 / 0.9) 0%, rgb(248 246 240 / 0) 66%)\",\n    ],\n    scheme: \"light\" as const,\n  },\n  /** Muted sage-grey — the ground behind the Total Debt / Net Worth pair. */\n  dusk: {\n    base: \"#9c9887\",\n    stops: [\n      \"radial-gradient(62% 62% at 20% 26%, rgb(226 214 188 / 0.95) 0%, rgb(226 214 188 / 0) 60%)\",\n      \"radial-gradient(58% 60% at 82% 76%, rgb(112 116 96 / 0.9) 0%, rgb(112 116 96 / 0) 58%)\",\n      \"radial-gradient(48% 48% at 66% 12%, rgb(212 186 146 / 0.85) 0%, rgb(212 186 146 / 0) 62%)\",\n      \"radial-gradient(44% 44% at 8% 88%, rgb(140 138 122 / 0.8) 0%, rgb(140 138 122 / 0) 62%)\",\n    ],\n    scheme: \"light\" as const,\n  },\n  /** Cold blue-slate — for surfaces that need to read as informational. */\n  slate: {\n    base: \"#161b22\",\n    stops: [\n      \"radial-gradient(62% 60% at 18% 20%, rgb(64 96 134 / 0.95) 0%, rgb(64 96 134 / 0) 60%)\",\n      \"radial-gradient(58% 62% at 88% 78%, rgb(122 148 176 / 0.85) 0%, rgb(122 148 176 / 0) 58%)\",\n      \"radial-gradient(56% 54% at 54% 52%, rgb(18 24 32 / 0.9) 0%, rgb(18 24 32 / 0) 64%)\",\n    ],\n    scheme: \"dark\" as const,\n  },\n} satisfies Record<string, { base: string; stops: string[]; scheme: \"light\" | \"dark\" }>\n\nexport type MeshPreset = keyof typeof MESH_PRESETS\n\nexport interface MeshBackdropProps extends React.ComponentProps<\"div\"> {\n  preset?: MeshPreset\n  /** Slow convection of the mesh. Off by default — motion belongs to the page, not the token. */\n  animate?: boolean\n  /** Film grain strength. `0` for a clean synthetic ground. */\n  grain?: number\n  /** Softens the whole mesh; useful when content needs to win. */\n  blur?: number\n}\n\nexport function MeshBackdrop({\n  preset = \"plum\",\n  animate = false,\n  grain = 0.055,\n  blur = 0,\n  className,\n  style,\n  children,\n  ...props\n}: MeshBackdropProps) {\n  const mesh = MESH_PRESETS[preset]\n\n  return (\n    <div\n      data-slot=\"mesh-backdrop\"\n      data-preset={preset}\n      className={cn(\"relative isolate overflow-hidden\", className)}\n      style={{ \"--lq-grain\": grain, backgroundColor: mesh.base, ...style } as React.CSSProperties}\n      {...props}\n    >\n      <div\n        aria-hidden\n        className={cn(\n          \"pointer-events-none absolute -inset-[20%] -z-10\",\n          animate && \"lq-mesh-drift motion-reduce:animate-none\",\n        )}\n        style={{\n          backgroundImage: mesh.stops.join(\", \"),\n          filter: blur ? `blur(${blur}px)` : undefined,\n        }}\n      />\n      {grain > 0 ? <span aria-hidden className=\"lq-grain -z-10\" /> : null}\n      {children}\n    </div>\n  )\n}\n\n/** Applies the preset's own color scheme to its subtree. */\nexport function meshScheme(preset: MeshPreset) {\n  return MESH_PRESETS[preset].scheme\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}