Noise Texture

1"use client"
2 
3import { useId, type ComponentProps } from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface NoiseTextureProps extends ComponentProps<"svg"> {
8  /** Extra classes merged onto the root `svg` element. */
9  className?: string
10  /**
11   * `baseFrequency` for `feTurbulence`; higher values yield finer-grained noise.
12   * @default 0.4
13   */
14  frequency?: number
15  /**
16   * `numOctaves` for `feTurbulence`; more octaves add detail at smaller scales.
17   * @default 6
18   */
19  octaves?: number
20  /**
21   * Linear slope on each channel after desaturation; adjusts contrast of the noise.
22   * @default 0.15
23   */
24  slope?: number
25  /**
26   * Opacity of the filled noise layer (`rect`).
27   * @default 0.6
28   */
29  noiseOpacity?: number
30}
31 
32export const NoiseTexture = ({
33  className,
34  frequency = 0.4,
35  octaves = 6,
36  slope = 0.15,
37  noiseOpacity = 0.6,
38  ...props
39}: NoiseTextureProps) => {
40  const filterId = useId()
41 
42  return (
43    <svg
44      className={cn(
45        "pointer-events-none absolute inset-0 z-0 size-full opacity-50 select-none dark:opacity-[0.75]",
46        className
47      )}
48      xmlns="http://www.w3.org/2000/svg"
49      {...props}
50    >
51      <filter id={filterId}>
52        <feTurbulence
53          type="fractalNoise"
54          baseFrequency={frequency}
55          numOctaves={octaves}
56          stitchTiles="stitch"
57        />
58        <feColorMatrix type="saturate" values="0" />
59        <feComponentTransfer>
60          <feFuncR type="linear" slope={slope} />
61          <feFuncG type="linear" slope={slope} />
62          <feFuncB type="linear" slope={slope} />
63        </feComponentTransfer>
64      </filter>
65      <rect
66        width="100%"
67        height="100%"
68        filter={`url(#${filterId})`}
69        opacity={noiseOpacity}
70      />
71    </svg>
72  )
73}