Free React Animated Background Components

A good background animation sets tone without stealing attention, and each of these draws from somewhere real: harmonographs, Chladni sand patterns, guilloché engraving, seismograph drums, star trails, topographic drift. They render on canvas or SVG, respect prefers-reduced-motion, pause off-screen, and sit behind your content with zero pointer interference. Use one per page, these are atmosphere, not decoration, and the restraint is what keeps them from reading as template noise.

26 components · MIT licensed · installable with the shadcn CLI

Chladni Sand

Thousands of sand grains snap into Chladni resonance figures as the plate's mode changes, order out of noise. React canvas background themed entirely by Tailwind tokens.

Crosshatch Drift

Engraver's cross-hatching as weather, drifting lobes of ruled shading build chiaroscuro where they overlap. CSS-only React background on Tailwind tokens, zero per-frame JavaScript.

Dendrite Growth

Seeded random walkers freeze into branching mineral dendrites, an accretion frontier tipped in primary with a live particle counter. React canvas background on Tailwind tokens.

Flow Field

A storm of ink streams advected through an evolving flow field, one stream in seven burns in the accent, and a fine pointer bends the current around itself. Canvas, 60fps-budgeted.

Frost Fern

Window frost grows in from the frame, anisotropic ice needles branch at 60 degrees, growth tips glowing primary before curing to ink. Seeded React canvas background on Tailwind tokens.

Galton Board

A Galton board in drafting ink, beads fall through a hairline peg lattice and build a live bell curve, one primary bead tracing its path. React canvas background on Tailwind tokens.

Glyph Tide

A field of mono glyphs breathing like liquid, character weight and ink density follow a flowing noise tide, with a current of accent glyphs threading through. Canvas, zero deps.

Guilloche Engine

Engine-turned guilloché, layered hypotrochoid lattices precess like banknote engraving, one rosette inked in primary. Pure SVG React background themed by Tailwind design tokens.

Halftone Pulse

A print-press halftone field, dot radii swell as slow waves travel the grid, and the pointer raises its own ripple. Ink-on-paper texture turned kinetic, canvas-drawn.

Harmonograph

A damped harmonograph pen traces precessing Lissajous figures that spiral into the sheet, older figures ghosting like ink. Generative React canvas background themed by Tailwind tokens.

Isogrid Swell

An isometric grid whose cells lift into low axonometric relief as a slow wave crosses the plane, and the pointer raises its own local swell. Drafting-table 2.5D, canvas, zero deps.

Meander Belt

A river reworks its floodplain, curvature-driven bank migration, neck cutoffs, oxbow lakes drying to scars. Geomorphology as a live React SVG background on Tailwind design tokens.

Moire Veil

Two hairline gratings drift over each other, breeding large moire interference fringes from pixel-scale motion. A pure CSS/SVG React background themed by Tailwind design tokens.

Orbit Paths

A celestial survey chart, concentric dashed orbit rings carry small bodies at seeded, incommensurate periods, one primary body drawing a decaying trail arc behind it. Canvas, zero deps.

Pendulum Field

A mounting rail of hairline pendulums swinging at incommensurate periods, phase waves travel down the row, nearly align, and disperse again. One primary bob keeps the beat. Canvas, zero deps.

Radar Watch

A harbour radar keeps watch, a rotating beam wakes phase-locked contact blips over hairline range rings. CSS-only React background on Tailwind tokens, zero per-frame JavaScript.

Rain Code Ink

Ink drips fall down a faint column grid with calligraphic gravity, each pools at a seeded baseline and evaporates, one column streaming in primary. Not a Matrix clone. Canvas, zero deps.

Scanline Drift

Slow plotter scanlines sweep the surface with faint phosphor persistence, every few passes a primary waveform trace rides the sweep and decays like an instrument reading. Canvas, zero deps.

Seismograph Drum

A strip-chart seismograph, ruled paper scrolls beneath fixed pens while seeded events swell in primary with mono magnitude stamps. Hybrid SVG and CSS React background on Tailwind tokens.

Star Trails

A long-exposure sky integrates live, magnitude-weighted star arcs lengthen in lockstep around an off-frame celestial pole. Hybrid SVG and CSS React background on Tailwind tokens.

Static Bloom

Calm analog grain that occasionally organizes, the static blooms into a brief ordered figure (rings, ruling, or grid) before dissolving back to noise. Sub-3Hz by design. Canvas, zero deps.

Tessellate Shift

A hairline triangle tessellation where seeded cells occasionally flip their diagonal and settle, architecture breathing one beam at a time, the freshest flip inked in primary. Canvas, zero deps.

Thread Weave

Vertical warp threads on a drafting sheet with one primary weft line weaving over and under, left to right, settled rows ghost into cloth and fade. Textile drafting energy. Canvas, zero deps.

Topographic Drift

Morphing topographic contour lines, elevation rings redrawn each frame from a slowly evolving noise field, like a survey map breathing. Marching squares on canvas, zero deps.

Voronoi Membrane

A breathing cellular membrane, drifting voronoi walls flex like tissue under glass, and the pointer presses the cells apart. Canvas approximation tuned for 60fps, zero deps.

Background Beams

Hairline ink lines flow across the surface while accent pulses travel along them, drafting-table wiring, pure CSS/SVG, deterministic geometry, static under reduced motion.