Noise Background
BackgroundsMITSubtle noise texture overlay for added depth on flat surfaces.
bun add @otfdashkit/ui
Preview
Noise BackgroundBackgrounds
Loading Storybook preview…
Code
@otfdashkit/uiimport { 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.
| Prop | Type | Default | Description |
|---|---|---|---|
| fixed | boolean | false | |
| frequency | number | 0.65 | Noise grain size — maps to SVG baseFrequency (default 0.65) |
| opacity | number | 0.04 | Noise opacity 0–1 (default 0.04) |