Noise Overlay

Add a subtle, static film-grain texture with an SVG overlay.

Dependencies: No extra packages
Size: 53 lines
Controls: 6 controls

example.tsx

1import { NoiseOverlay } from "@/components/onycx/noise-overlay";23export default function Example() {4  return (5    <NoiseOverlay6      opacity={0.018}7      frequency={0.85}8      octaves={3}9      tile={240}10      blend={"normal"}11      position={"fixed"}12    />13  );14}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/noise-overlay.json

1 · Dependencies

None beyond React and Tailwind.

2 · Copy the source

components/onycx/noise-overlay.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the noise-overlay.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
opacity	number	0.018	Clamped to 0–1; the original is .018.
position	"fixed" \| "absolute"	"fixed"	Viewport-wide, or confined to the nearest positioned parent.
frequency / octaves	number	0.85 / 3	feTurbulence baseFrequency and numOctaves.
tile	number	240	viewBox of the SVG tile. With no intrinsic size the tile is scaled to the layer like contain and repeats, so the grain scales with the viewport, as in the original.
blend	"normal" \| "overlay" \| "soft-light" \| "multiply" \| "screen"	"normal"	mix-blend-mode; the original uses none.
zIndex	number	60	Stacking order of the layer.