{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "heatmap-logo",
  "type": "registry:ui",
  "title": "Heatmap Logo",
  "description": "Component for heatmap-logo",
  "dependencies": [
    "@paper-design/shaders-react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/heatmap-logo.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Heatmap } from \"@paper-design/shaders-react\";\nimport { cn } from \"@/lib/utils\";\n\nconst ICE = [\n  \"#050b1a\",\n  \"#0f2550\",\n  \"#1f4fa8\",\n  \"#4f8ef0\",\n  \"#9cc8ff\",\n  \"#e2f0ff\",\n  \"#ffffff\",\n];\n\n/**\n * Feather the canvas edges so the halo and grain never end in a hard square,\n * which shows on light surfaces. The logo sits well inside the 15% fade band.\n */\nconst FADE = \"linear-gradient(to right, transparent, black 15%, black 85%, transparent)\";\nconst EDGE_FADE = {\n  maskImage: `${FADE}, ${FADE.replace(\"to right\", \"to bottom\")}`,\n  maskComposite: \"intersect\",\n  WebkitMaskImage: `${FADE}, ${FADE.replace(\"to right\", \"to bottom\")}`,\n  WebkitMaskComposite: \"source-in\",\n} as const;\n\nexport interface HeatmapLogoProps {\n  /** Logo image URL or data URI. Only its silhouette is used, so any solid mark works. */\n  image: string;\n  /** Heat ramp from coolest to hottest, as hex colors. */\n  colors?: string[];\n  /** Fill behind the logo. Transparent by default, so the glow blends into any surface. */\n  background?: string;\n  /** Strength of the halo around the logo, 0 to 1. */\n  glow?: number;\n  className?: string;\n}\n\n/** A logo that glows like hot metal, with heat drifting slowly through it. */\nexport function HeatmapLogo({\n  image,\n  colors = ICE,\n  background = \"#00000000\",\n  glow = 0,\n  className,\n}: HeatmapLogoProps) {\n  const reduceMotion = usePrefersReducedMotion();\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\"relative aspect-square w-80\", className)}\n      style={EDGE_FADE}\n    >\n      <Heatmap\n        image={image}\n        colors={colors}\n        colorBack={background}\n        contour={0.45}\n        innerGlow={0.55}\n        outerGlow={glow}\n        noise={0.15}\n        angle={0}\n        scale={0.62}\n        speed={reduceMotion ? 0 : 0.6}\n        className=\"absolute inset-0\"\n      />\n    </div>\n  );\n}\n\nfunction usePrefersReducedMotion() {\n  const [reduceMotion, setReduceMotion] = useState(false);\n\n  useEffect(() => {\n    const query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    const update = () => setReduceMotion(query.matches);\n    update();\n    query.addEventListener(\"change\", update);\n    return () => query.removeEventListener(\"change\", update);\n  }, []);\n\n  return reduceMotion;\n}\n"
    }
  ]
}