React Background Components
Full-bleed motion for the layer behind everything else. Twenty-four backgrounds that run at the back of a hero, a section, or a whole page — WebGL shader fields, canvas particle systems, drifting contour maps, and pure-CSS grids. Each one is sized by its container rather than the viewport, so it drops into a section as easily as a page, and each exposes its palette and speed as props you tune in the browser before copying anything.
24 components · all free
In This Collection
Waves
A woven field of flowing waves rendered on a WebGL line shader.
Grainient
An animated grainy mesh-gradient rendered on a WebGL2 shader.
Light Rays
Volumetric god-rays from a configurable origin, optionally mouse-following.
Mask Blur
Progressive edge blur — stacked backdrop-filter layers dissolve content toward a chosen edge.
Side Rays
Corner-anchored two-color light rays with adjustable tilt and blend.
Dot Field
An interactive dot grid that bulges and glows around the cursor.
Strands
Glowing wavy light-strands with an optional glass refraction lens.
Ribbons
Flowing translucent ribbons drifting across a canvas.
World Map ASCII
A dot-matrix world map whose particles scatter from the cursor.
Constellation
A constellation network — drifting particles link by proximity, chase and flee the cursor, and glow.
Plus Grid
A canvas field of '+' glyphs — scroll or pointer motion injects a traveling wave that ripples and decays across the grid.
Barcode
A procedural barcode whose bars light up like piano notes — looping on autoplay or scrubbed by scroll.
Aurora
Flowing curtains of amethyst light drifting across a starless night sky — an fbm-warped WebGL2 field where luminous bands ripple, fold, and dissolve into fine grain, like a polar aurora seen from the dark side of the world.
Starfield
Depth-layered stars drifting through a slow warp, each layer parallaxing at its own pace, with the occasional shooting star streaking a bright amethyst tail across the dark before the field settles back to its patient glimmer.
Cinders
A dark field of embers and ash rising on the draft, aglow with amethyst.
Shadowflame
A black flame with an amethyst core, its body folded from domain-warped noise.
Cathode
A cathode-ray tube showing nothing worth watching: a beam that turns around at each edge, phosphor that holds after it has passed, and a hum bar rolling up the glass.
Turing
Gray-Scott reaction-diffusion on the GPU. Two reagents, four terms, and coral, labyrinths and colonies that settle and stop all fall out of the arithmetic — a background that grows rather than loops, and never reaches the same frame twice.
Quicksilver
Molten chrome. Every other shader background emits light; this one reflects a studio that does not exist, synthesised from the surface normal — sharp softbox edges, a conductor's Fresnel wash, thin-film iridescence, and a wake that keeps moving where you dragged.
Mycelium
A slime mould foraging in the dark. Every other field here is a differential equation on a grid; this one is a population — up to a million agents, each carrying a position and a heading, sampling the trail ahead of itself, turning toward whatever smells strongest and laying down more of it as it goes. The veins, the junctions and the slow reorganisation are nowhere in the code.
Contour
A topographic map of terrain that will not hold still. The lines are not drawn, they are found — a height field is sampled onto a grid every frame and marching squares walks it once per altitude, emitting segments wherever the land crosses that height. Nothing here knows what a ridge is; ridges are where the crossings bunch up. The pointer raises a hill the contours have to route around, and because the interval is fixed rather than the line count, that extra altitude produces extra rings instead of restretching the ones already on screen.
Rainglass
Rain on a window with a city somewhere behind it. There is no scene being blurred — the backdrop is built out of focus to begin with, so the drops have something to bend without a render target or a blur pass anywhere in the frame. Each drop is a pure function of time inside its own grid cell, which is why a thousand of them cost the same as one and a resize cannot lose the rain. They descend the way water actually does: holding by surface tension, breaking loose, running fast, stopping again — and the trail exists only above the drop that made it.
Stipple
A flowing luminance field crushed to ink and paper by error diffusion — each cell's quantization error is pushed onto its unvisited neighbours in a serpentine scan, so mid-tones resolve into the organic scattered grain of a stippled engraving instead of a fixed lattice. Atkinson forwards only three-quarters of the error, which is why the classic-Mac look keeps its blown highlights; Floyd–Steinberg and Sierra spread all of it for a smoother ramp. The field is diffused on the CPU into an ImageData at one cell per CSS pixel-group, then scaled up with smoothing off, so the grid survives retina intact.
Prism
A raymarched glass prism splitting a beam into its spectrum — an SDF solid turned in a hazy volume, a white shaft entering one face and a fan of spectral bands leaving another, each band bent by its own wavelength-dependent deviation so the fan spreads the way dispersion actually spreads. The beams are analytic capsule glows integrated against the view ray, not a second march, which is what keeps sixty-four steps and eight bands inside a frame budget. Drag orbits the solid with momentum; the haze is what makes the shafts readable at all, because light in clean air is invisible until it hits something.