Atmospheres

Backgrounds that set a mood, then step aside.

An atmosphere should be felt more than noticed. Every background here fills its container, stays behind your content, pauses when off-screen or in a hidden tab, adapts its colours to light and dark themes, and settles into a still frame when motion is unwelcome.

E.17
viewportcontinuouszero deps
Aurora Field
A fluid colour atmosphere of drifting, blurred light that fills its container.
Backgrounds & Effects · React / CSS / Tailwind
E.18
pointerhovercontinuouszero deps
Dot Matrix Field
A halftone dot grid that swells and lights up around the pointer, drawn on one canvas.
Backgrounds & Effects · React / Canvas / Tailwind
E.19
viewportcontinuouszero deps
Noise Grid
An editorial hairline grid with film grain and accent cells that pulse and wander.
Backgrounds & Effects · React / CSS / SVG / Tailwind
E.48
pointerviewportcontinuouszero deps
Flow Field
Particles drifting along an evolving simplex-noise vector field, leaving soft fading trails.
Backgrounds & Effects · React / Canvas / Tailwind
E.49
pointerviewportcontinuouszero deps
Topographic Lines
Animated contour lines traced with marching squares over an evolving noise terrain.
Backgrounds & Effects · React / Canvas / Tailwind
E.51
pointerviewportcontinuouszero deps
Signal Lines
Stacked horizontal lines displaced by layered noise waves — a ridgeline, oscilloscope feel.
Backgrounds & Effects · React / Canvas / Tailwind
E.79
pointerclickcontinuouszero deps
Water Ripple
A refractive water surface: pointer and raindrops send ripples across a tinted, tiled pool.
Backgrounds & Effects · React / Canvas / Tailwind
E.109
pointerclickcontinuouszero deps
ASCII Field
An animated ASCII-art field: noise, waves or rings sampled on a character grid and mapped to a density ramp.
Backgrounds & Effects · React / Canvas / Tailwind
E.110
pointerviewportcontinuouszero deps
Light Rays
Soft volumetric god rays fanning from a light source, swaying slowly with drifting dust motes.
Backgrounds & Effects · React / CSS / Tailwind
E.111
pointerclickspringzero deps
Warp Grid
Grid lines that bend around the pointer like a gravitational lens and spring back when it leaves.
Backgrounds & Effects · React / Canvas / Tailwind
E.112
pointerviewportcontinuouszero deps
Bokeh Field
Out-of-focus lights drifting at different depths, with pointer parallax and a circle or hexagon aperture.
Backgrounds & Effects · React / Canvas / Tailwind
E.140
pointerviewportcontinuouszero deps
Metaballs
Lava-lamp blobs that drift, merge and split through an implicit field — your pointer joins in as one more.
Backgrounds & Effects · React / Canvas / Tailwind
E.141
pointerviewportcontinuouszero deps
Voronoi Field
A drifting Voronoi mosaic with hairline cell edges — the pointer becomes a seed and the cells make room.
Backgrounds & Effects · React / Canvas / Tailwind
E.172
pointerscrollcontinuouszero deps
Parallax Hills
Layered, seeded landscape silhouettes with atmospheric haze, slow drift and pointer/scroll parallax by depth.
Backgrounds & Effects · React / SVG / Tailwind
E.170
pointerdragcontinuouszero deps
Ink Trail
Pointer strokes leave ink that bleeds, drifts and fades like ink dropped in water, cycling through a palette.
Backgrounds & Effects · React / Canvas / Tailwind
E.169
pointerhovertweenzero deps
Halftone Image
Any image re-printed as a rotated halftone screen of dots, squares or lines, with a pointer lens that reveals the original.
Backgrounds & Effects · React / Canvas / Tailwind
E.200
pointerviewportcontinuouszero deps
Fireflies
Glowing fireflies drifting on smooth noise paths, blinking on their own rhythms and gently drawn toward the pointer.
Backgrounds & Effects · React / Canvas / Tailwind
E.202
pointerviewportcontinuouszero deps
Weather Effect
Rain, snow or sleet over content: wind-angled streaks that splash, drifting flakes with sway and depth, and a pointer gust.
Backgrounds & Effects · React / Canvas / Tailwind
E.199
pointerviewportcontinuouszero deps
Electric Arc
Crackling electric arcs between anchors: forked, flickering bolts that re-route constantly and reach for a nearby pointer.
Backgrounds & Effects · React / Canvas / Tailwind

Technology requirements

Everything this set needs, combined. Each component remains a separate, self-contained file.

ReactCSSTailwindCanvasSVG

npm dependencies: none
Peer: react, tailwindcss

Next collectionApp Builder Kit