NoiseOverlay

Full-viewport static grain using an SVG feTurbulence (fractal noise) + feColorMatrix (desaturate) filter chain. Renders a fixed, pointer-events-none layer meant for a single use near the app root. Prefer opacity around 0.05–0.12 at normal zoom.

import { NoiseOverlay } from 'phoundry-ui';

Preview (exaggerated in this box)

Higher opacity here for visibility; the docs site root uses a lower value.

Show code

<div class="relative h-32 overflow-hidden">
  <NoiseOverlay position="absolute" opacity={0.22} zIndex={0} />
  <div class="relative z-10 p-3">…</div>
</div>

Grain tuning

Tuple baseFrequency stretches noise asymmetrically; seed stabilizes the pattern across hot reloads; try blendMode values like overlay, multiply, or normal to match your background.

Stronger grain + overlay blend for demo.

Show code

<NoiseOverlay
  position="absolute"
  opacity={0.1}
  baseFrequency={[0.9, 1.1]}
  numOctaves={4}
  seed={42}
  blendMode="overlay"
/>

Root layout

Mount once inside your top-level +layout.svelte (or app shell). Keep zIndex under your modal / tooltip layer; the component defaults to 1. The layer uses pointer-events: none so it never steals focus or clicks.

<script>
  import { NoiseOverlay } from 'phoundry-ui';
</script>

<div class="relative min-h-svh">
  <NoiseOverlay />
  <div class="relative z-10">
    {@render children?.()}
  </div>
</div>

Props

Prop	Type	Default	Description
opacity	number	0.08	Layer alpha; keep low for a subtle look.
zIndex	number	1	Stacking order; keep below your overlay / modal z-indexes.
position	'fixed' \| 'absolute'	'fixed'	Fixed = viewport; absolute = fill a relative/absolute parent.
baseFrequency	string \| number \| [number, number]	0.72	feTurbulence frequency; one value or x/y pair. Higher = finer grain.
numOctaves	number	3	Turbulence detail (typically 2–4).
seed	number	—	Optional 0–999; fixes the pattern when you need a stable look across remounts.
blendMode	string	'soft-light'	CSS mix-blend-mode; soft-light and overlay are common for UI grain.
class	string	—	Extra classes on the fixed wrapper div.