Skip to content

Noise Background

BackgroundsMIT
View in Storybook

Subtle noise texture overlay for added depth on flat surfaces.

bun add @otfdashkit/ui

Preview

Noise Background
Loading Storybook preview…

Code

import { NoiseBackground } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="relative h-[400px] bg-card">
      <NoiseBackground />
      <div className="relative z-10 flex items-center justify-center h-full">
        <span className="text-foreground text-lg">Noise overlay</span>
      </div>
    </div>
  )
}

Free with the SDK. This pattern ships in @otfdashkit/ui under the MIT license.

Props

Props declared in the NoiseBackground source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
fixedbooleanfalse
frequencynumber0.65Noise grain size — maps to SVG baseFrequency (default 0.65)
opacitynumber0.04Noise opacity 0–1 (default 0.04)