Ambient backgrounds

@summonware/ui · ambient · ·

Usage

Generative-category ambient backgrounds — Unicorn Studio's "Generative" tab (Aurora, Nebula, Noise Fill, Wisps, Gradient, Circle, Pattern, Vignette). MeshGradient/NoiseGrain/ParticleField/AuroraWash are Canvas2D, built on the same drifting-blob technique apps/dashboard/app/(docs)/_chrome/hero-fluid.tsx proved first for the homepage hero, generalized via a shared useCanvasLoop hook (packages/ui/src/lib/motion-hooks.ts) rather than reimplemented per effect. hero-fluid.tsx itself is left as its own file — a single tuned consumer, not migrated onto MeshGradient. Circle/Pattern/GridGlowPulse are pure CSS, alongside Vignette/Fog/etc. in css-effects.tsx.
import { MeshGradient, NoiseGrain, ParticleField, AuroraWash, Circle, Pattern, GridGlowPulse } from '@summonware/ui';

Best practices

DoGive every canvas-based ambient effect a positioned (relative/absolute) parent with a real height — they render as `position: absolute; inset: 0`, matching the parent's box exactly, same fix as the Vignette sizing bug found while testing css-effects.tsx.
DoUse these behind marketing/hero copy, not behind dense dashboard data — a moving backdrop under a data table competes with what the user is trying to read.
Don'tRun more than one ambient canvas effect in the same stacking context — each runs its own rAF loop; layering two is real, avoidable GPU cost for a visual result neither reads clearly.

Anatomy

MeshGradientConfigurable blob-count/colour drift — generalizes hero-fluid.tsx.
NoiseGrainAnimated film-grain texture overlay.
ParticleFieldSlow-drifting dots, cheaper than MeshGradient.
AuroraWashSoft moving colour bands.
CircleA pulsing ring — a "live"/recording indicator.
PatternA repeating diagonal-stripe backdrop.
GridGlowPulseA faint grid with a slow-pulsing radial glow.

Examples

Common configurations, variations and states.

MeshGradient

The generalized hero-fluid.tsx technique — drifting blurred blobs.

NoiseGrain and ParticleField

Two lighter-weight Canvas2D ambient effects, side by side.

AuroraWash

Soft moving colour bands — calmer than MeshGradient's blobs.

Circle, Pattern, GridGlowPulse

Pattern
Grid glow
The pure-CSS tier of the Generative category.