{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "noise-background",
  "type": "registry:component",
  "title": "Noise Background",
  "description": "Animated SVG fractal noise grain texture overlay, premium film grain effect for dark hero sections",
  "dependencies": [],
  "files": [
    {
      "path": "components/kraavon-ui/NoiseBackground.tsx",
      "content": "\"use client\";\nimport React, { useId } from \"react\";\n\ninterface NoiseBackgroundProps {\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  baseColor?: string;\n  noiseOpacity?: number;\n  noiseScale?: number;\n  animated?: boolean;\n  /** Overlay an accent glow spot */\n  glow?: boolean;\n  glowColor?: string;\n}\n\nexport default function NoiseBackground({\n  children,\n  className,\n  style,\n  baseColor = \"#0d0d0f\",\n  noiseOpacity = 0.18,\n  noiseScale = 0.65,\n  animated = true,\n  glow = true,\n  glowColor = \"rgba(24,181,255,0.15)\",\n}: NoiseBackgroundProps) {\n  const id = useId().replace(/:/g, \"\");\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"relative\",\n        overflow: \"hidden\",\n        background: baseColor,\n        ...style,\n      }}\n    >\n      {/* SVG noise texture */}\n      <svg\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          width: \"100%\",\n          height: \"100%\",\n          opacity: noiseOpacity,\n          pointerEvents: \"none\",\n        }}\n        aria-hidden\n      >\n        <filter id={`noise-${id}`}>\n          <feTurbulence\n            type=\"fractalNoise\"\n            baseFrequency={noiseScale}\n            numOctaves={4}\n            stitchTiles=\"stitch\"\n            result=\"noiseOut\"\n          >\n            {animated && (\n              <animate\n                attributeName=\"seed\"\n                values=\"0;100\"\n                dur=\"8s\"\n                repeatCount=\"indefinite\"\n              />\n            )}\n          </feTurbulence>\n          <feColorMatrix type=\"saturate\" values=\"0\" />\n        </filter>\n        <rect width=\"100%\" height=\"100%\" filter={`url(#noise-${id})`} />\n      </svg>\n\n      {/* Optional glow spot */}\n      {glow && (\n        <div\n          style={{\n            position: \"absolute\",\n            top: \"20%\",\n            left: \"50%\",\n            transform: \"translate(-50%, -50%)\",\n            width: \"60%\",\n            height: \"40%\",\n            background: `radial-gradient(ellipse at center, ${glowColor} 0%, transparent 70%)`,\n            pointerEvents: \"none\",\n          }}\n        />\n      )}\n\n      {/* Content */}\n      {children && (\n        <div style={{ position: \"relative\", zIndex: 1 }}>{children}</div>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}