{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "noise-texture",
  "title": "Noise Texture",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A film-grain layer made from an SVG turbulence filter, with strength, fineness, blend mode and an optional shimmer, to take the plastic edge off gradients, cards and photos.",
  "dependencies": [
    "motion@^12"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/noise-texture.tsx",
      "content": "// Ballmac UI: Noise Texture. https://ui.ballmac.com/components/noise-texture\n\"use client\"\n\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype NoiseTextureProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** Strength of the grain, from 0 to 1. */\n  opacity?: number\n  /** Fineness of the grain. Higher is finer. */\n  frequency?: number\n  /** Side of the repeating tile in pixels. */\n  tile?: number\n  /** How the grain mixes with what is behind it. \"overlay\" adds grain to light and dark areas alike. */\n  blend?: \"overlay\" | \"soft-light\" | \"multiply\" | \"screen\" | \"normal\"\n  /** Make the grain shimmer like film. */\n  animated?: boolean\n}\n\nfunction noiseImage(frequency: number, tile: number) {\n  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${tile}' height='${tile}'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='${frequency}' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(#n)'/></svg>`\n  return `url(\"data:image/svg+xml,${encodeURIComponent(svg)}\")`\n}\n\n/** A film-grain layer for gradients, cards and photos. Put it inside a positioned parent. Decorative. */\nfunction NoiseTexture({ opacity = 0.14, frequency = 0.8, tile = 220, blend = \"overlay\", animated = false, className, style, ...props }: NoiseTextureProps) {\n  const reduce = useReducedMotion()\n  const image = React.useMemo(() => noiseImage(frequency, tile), [frequency, tile])\n  const steps = [0, 0.3, 0.6, 0.15, 0.85, 0.45].map((n) => `${Math.round(n * tile)}px ${Math.round(((n * 7) % 1) * tile)}px`)\n  return (\n    <div\n      data-slot=\"noise-texture\"\n      aria-hidden=\"true\"\n      className={cn(\"pointer-events-none absolute inset-0 overflow-hidden\", className)}\n      style={{ ...style }}\n      {...props}\n    >\n      <motion.div\n        className=\"absolute -inset-[20%]\"\n        style={{ backgroundImage: image, backgroundSize: `${tile}px ${tile}px`, opacity, mixBlendMode: blend }}\n        animate={animated && !reduce ? { backgroundPosition: steps } : undefined}\n        transition={{ duration: 0.9, repeat: Infinity, ease: \"linear\", times: [0, 0.2, 0.4, 0.6, 0.8, 1], type: \"keyframes\" }}\n      />\n    </div>\n  )\n}\n\nexport { NoiseTexture, type NoiseTextureProps }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/noise-texture.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "noise",
      "grain",
      "texture",
      "overlay",
      "gradient"
    ],
    "version": "1.0.0",
    "updated": "2026-10-01",
    "ai": {
      "summary": "<NoiseTexture opacity frequency tile blend animated /> absolutely fills its relative parent. No image file is needed; the grain is an inline SVG data URI.",
      "whenToUse": [
        "Gradient heroes and cards that band or look flat",
        "Giving imagery a printed feel"
      ],
      "whenNotToUse": [
        "Text-heavy surfaces at high opacity"
      ],
      "composesWith": [
        "aurora-background",
        "gradient-text",
        "card"
      ],
      "a11y": [
        {
          "keys": "Screen readers",
          "action": "Decorative: aria-hidden and pointer-events-none"
        },
        {
          "keys": "Reduced motion",
          "action": "The grain never shimmers"
        }
      ],
      "customization": [
        "opacity",
        "frequency",
        "tile",
        "blend",
        "animated"
      ]
    },
    "examples": [
      "noise-texture-demo",
      "noise-texture-blends"
    ],
    "url": "https://ui.ballmac.com/components/noise-texture"
  },
  "categories": [
    "backgrounds"
  ],
  "type": "registry:ui"
}