Noise Background

Drifting brand-gradient blobs under a static film-grain overlay; wraps its content.

Quiet software for loud ideas

A calm workspace for teams that ship.

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/noise-background.json

Adds components/velora/noise-background.tsx.

An email signup card with heavier grain; the drift stops while the field has focus.

One short email a week: what shipped, what broke and what we learned.

No spam. Unsubscribe in one click.

Prop	Type	Default
`grain` Film-grain opacity, 0–1 (0 hides the grain)	`number`	`0.35`
`speed` Drift speed multiplier	`number`	`1`
`pauseOnHover` Pause the drift while hovered (focus inside always pauses it)	`boolean`	`true`

Also accepts every <div> attribute, forwarded to the root element.

Reduced motion: The blobs never move; the gradient wash and grain render as a still backdrop.
Keyboard: The wrapper is not focusable. The drift stops while focus is inside it (and while hovered, unless pauseOnHover is false); it also stops offscreen and in hidden tabs.
Screen readers: The blob and grain layers are aria-hidden; only the children are announced.