AmbientBackground
A decorative, brand-tinted page background — a soft radial glow plus a fine noise texture — so a flat page fill reads as a considered surface instead of a plain color.
You're looking at it right now — this docs site renders AmbientBackground once, in its root layout, and every page you navigate to (including this one) is the live example.
import { AmbientBackground } from "@42/ui-react/ambient-background";
// app/layout.tsx
<body>
<AmbientBackground />
{children}
</body>;Render it once, as the first child of your root layout. It's position: fixed, so a single instance covers the whole viewport regardless of scroll position or page height — later content naturally paints over it as long as it's mounted first. It's purely decorative: aria-hidden, pointer-events-none, and hidden under forced-colors (Windows High Contrast Mode), since a background tint has no place overriding a user's forced palette.
The glow and noise are CSS custom properties (--ambient-glow / --ambient-noise, defined once in theme.css, brand-tinted and theme-aware via data-theme) rather than hardcoded in the component — override either on :root in your own stylesheet to reskin it without forking the component.
Glow and noise render as two independent position: fixed elements rather than one wrapper containing two children — nesting the noise layer's blend mode inside a fixed wrapper would trap it inside that wrapper's own isolated stacking context, unable to blend against the real page content underneath. The examples below constrain each layer to a bounded box via classNames (overriding the default fixed inset-0 -z-10 on each) purely so they fit inside the preview frame — in real use you pass no props at all.
Both layers (default)
Page content
Code
<AmbientBackground />Glow only
Turn off the noise layer with noise={false} for just the radial tint.
Code
<AmbientBackground noise={false} />Noise only
Turn off the glow with glow={false} for just the grain texture — useful over a background you're already tinting yourself.
Code
<AmbientBackground glow={false} />API
Prop
Type
Accessibility
AmbientBackground is purely decorative:
aria-hidden="true"— assistive tech skips it entirely.pointer-events-none— it never intercepts clicks or taps meant for real content underneath.forced-colors:hidden— it disappears under Windows High Contrast Mode, since a decorative tint has no place overriding a user's forced palette there.