Do WebGL backgrounds slow down my site?

They are tuned to be light: one fragment shader, a capped pixel ratio, and rendering that stops when the background leaves the screen.

No. Every shader background talks to WebGL directly in its own file, so there is no 3D library to install.

Can I change the colours?

Yes. Backgrounds read your theme tokens by default and take any CSS colour as a prop, and they follow light and dark mode.

Do these animated React backgrounds work with shadcn/ui?

Yes. Charcoal UI is a shadcn registry, so components install with the same CLI, use the same CSS variables and sit next to your existing shadcn components.

Animated React Backgrounds

Animated React backgrounds: WebGL shaders, aurora, beams, grids, particles and more.

About these animated React backgrounds

The largest category in the library: aurora and silk shaders, light beams, a black hole, grainy gradients, dot and line grids, particle fields, starfields, fireworks, falling glyphs and pixel snow, ready to sit behind a hero or a whole page.

Shaders are written in each file with no three.js, so a background costs one component and nothing else. They pause when scrolled out of view and fall back gracefully where WebGL is missing.

Where they earn their keep

Hero sections and landing pages.
Pricing and call-to-action bands.
Login, sign-up and waitlist pages.
Event, launch and portfolio sites.

How they are built

Each background fills its parent, takes your theme colours, and exposes the knobs that matter, such as speed, density and colour. Device pixel ratio is capped, animation stops off screen, and reduced motion shows a still frame.

Each one is a single file you copy into your project with the shadcn CLI and own outright. They are written for React 19 and Tailwind CSS 4 with Motion, use only your theme's CSS variables, and work in Next.js, Vite, Remix and Astro.

All 86 animated React backgrounds

4 are free and MIT licensed, and 82 are part of Charcoal UI Pro, which covers all 393 Pro components, 112 sections and 100 templates for one price. Open any of them to try it live, tune it and copy the code.

Ember Field (Pro): An animated React ember background: glowing embers drift up and flicker as they cool
Dot Grid: An interactive React dot grid background whose dots swell near the pointer
Smoke (Pro): A slow React smoke background: blurred plumes drifting over dark sections, CSS only
Aurora (Pro): An animated React aurora background: soft light bands drifting across a section
Grid Beams (Pro): A React grid background with beams of light running along its lines
Meteors (Pro): A React meteor shower background: streaks falling diagonally, CSS only
Grain: A React film grain overlay that removes gradient banding
Wave Lines (Pro): An animated React wave lines background: layered sine lines drifting sideways
Ripple Rings (Pro): React ripple rings: sonar rings pulsing from a centre for live or searching states
Particle Network (Pro): A React particle network background: nodes link up and gather around the pointer
Flow Field (Pro): A React flow field background: particles follow a shifting current with silky trails
Shader Gradient (Pro): A WebGL React mesh gradient background: domain-warped noise folding three colours
Starfield (Pro): A React starfield background: stars stream toward you, hold to jump to warp
Halftone Wave (Pro): A React halftone background whose dots swell as waves roll through
Topographic (Pro): A React topographic background: shifting contour lines like a living map
Liquid Blob (Pro): A React liquid blob background: molten blobs merge and split through a gooey filter
Pixel Rain (Pro): A React digital rain background: columns of glyphs with glowing heads
Laser Flow (Pro): A React laser background: a beam sweeps a dark field and bends toward the pointer
Flux Lines (Pro): A React flux lines background: segments flow along a field and face the pointer
Floating Lines (Pro): A React floating lines background with depth layers and pointer parallax
Line Waves (Pro): A React line waves background: stacked sine waves that swell toward the middle
Sliced Waves (Pro): A React sliced waves background: a ribbon wave cut into rippling slices
Gradient Waves (Pro): A React gradient waves background: translucent bands rolling across the bottom
Pattern Waves (Pro): A React pattern waves background: dots, dashes or crosses lifted by a wave
Shape Waves (Pro): A React shape waves background: shapes that swell and spin with a sweeping wave
Web Threads (Pro): A React web threads background: a cobweb that sways and tenses toward the pointer
Magnet Lines (Pro): A React magnet lines background: bars that turn toward the pointer like filings
Ghost Fibers (Pro): A React ghost fibers background: faint strands drifting up like threads of smoke
Silk (Pro): A WebGL React silk background: draped folds that catch the light
Grid Motion (Pro): A React grid motion background: tilted rows of tiles slide with the pointer
Grid Scan (Pro): A React grid scan background: a perspective floor grid with a sweeping light bar
Grid Distortion (Pro): A React grid distortion effect: an image bulges around the pointer
Ripple Grid (Pro): A React ripple grid background: lines ripple outward from the pointer
Dot Field (Pro): A React dot field background: dots breathe with a wave and part around the pointer
Acid Squares (Pro): A React acid squares background: pulsing, rotating squares in waves of colour
Shape Grid (Pro): A React shape grid background: shapes that morph in diagonal waves
Micro Slats (Pro): A React micro slats background: thin slats tilt like blinds in a breeze, CSS 3D
Gradient Blinds (Pro): React gradient blinds: vertical blinds over a gradient that open toward the pointer
Scanner (Pro): A React scanner background: a sweeping line with a glow and flashing points
Radar (Pro): A React radar background: a rotating sweep with contacts that light up and fade
Particles (Pro): A React particles background: soft points drifting at three depths with parallax
Galaxy (Pro): A React galaxy background: thousands of stars in winding spiral arms
Pixel Blast (Pro): A React pixel blast background: rings of pixels burst out and fade
Antigravity (Pro): A React antigravity background: motes rise, trail and scatter from the pointer
Ballpit (Pro): A React ballpit background: balls drop, bounce, pile up and get pushed around
Hyperspeed (Pro): A React hyperspeed background: a road rushes past, hold to go faster
Lightning (Pro): A React lightning background: branching bolts strike with flashes and afterglow
Letter Glitch (Pro): A React letter glitch background: flickering glyphs with vignettes for copy
Faulty Terminal (Pro): A React faulty terminal background: glyph noise, tearing bands and CRT glass
Gradient ASCII (Pro): A React ASCII gradient background: drifting lights drawn as characters
Dither (Pro): A React dither background: noise quantised into an ordered two-tone crosshatch
Light Rays (Pro): A React light rays background: volumetric rays fanning from an edge
Side Rays (Pro): A React side rays background: thin rays entering from the side like light through blinds
Light Pillar (Pro): A React light pillar background: soft vertical pillars rising from the bottom
Lightfall (Pro): A React lightfall background: streaks of light falling and blooming as they land
Light Tunnel (Pro): A React light tunnel background: rings fly out of a vanishing point
Prismatic Burst (Pro): A React prismatic burst background: spectral rays turning around a point
Prism (Pro): A React prism background: a turning glass prism casting a spectrum, CSS 3D
Dark Veil (Pro): A WebGL React dark veil background: folding noise with light through the creases
Orb (Pro): A React glowing orb background with an inner swirl and a hover-bright halo
Aero Shards (Pro): A React aero shards background: glass shards floating with depth parallax
CRT Warp (Pro): A React CRT effect: curved glass, scanlines and a rolling band over any content
Liquid Chrome (Pro): A WebGL React liquid chrome background: mirror metal folding over itself
Iridescence (Pro): A WebGL React iridescence background: a thin-film sheen that tilts with the pointer
Plasma (Pro): A WebGL React plasma background in a two-tone palette with a pointer focus
Plasma Wave (Pro): A WebGL React plasma wave background: rolling bands with glowing crests
Balatro (Pro): A WebGL React paint vortex background with three swirling colours
Color Bends (Pro): A WebGL React color bends background: bands bending like light through glass
Molten Metal (Pro): A WebGL React molten metal background: glowing veins crawling through a crust
Liquid Ether (Pro): A WebGL React liquid ether background: wisps curl and a vortex follows the pointer
Ferrofluid (Pro): A WebGL React ferrofluid background: glossy fluid spiking toward the pointer
Nebula (Pro): A WebGL React nebula background: glowing clouds with stars in the thin parts
Caustics (Pro): A WebGL React caustics background: underwater light lines on a pool floor
Beams (Pro): A React WebGL background of soft light beams falling through haze
Evil Eye (Pro): A React WebGL eye with a fiery iris that follows the cursor and blinks
Grainient: A free React WebGL grainy gradient with three flowing colours
Magic Rings (Pro): A React WebGL background of glowing rings rippling out from the centre
Pixel Snow (Pro): A React WebGL snowfall in chunky pixels with three depth layers
Soft Aurora (Pro): A React WebGL northern lights background with soft curtains of colour
Threads (Pro): A React WebGL background of fine threads that bow toward the cursor
Black Hole (Pro): A React WebGL black hole that bends the starfield behind it
Bubble Background (Pro): A React background of soft blurred colour bubbles that drift and follow the cursor
Fireworks (Pro): A React canvas fireworks background with click-to-launch rockets
Gravity Stars (Pro): A React canvas starfield that the cursor pulls into orbit
Hexagon Grid: A free React hexagon grid background that lights up under the cursor
Glyph Rain (Pro): A React canvas background of falling glyph columns with bright leading heads

Install one

npx shadcn@latest add https://charcoalui.com/r/dot-grid.json

Every page shows the exact command. The CLI adds the file to components/ui along with any dependency it needs, and AI coding agents can do the same through the Charcoal UI MCP server.

Other categories

Browse the rest of the library by what you are building.

React Input Components: 68 components
React Navigation Components: 27 components
React Dialog, Popover and Tooltip Components: 19 components
React Loading, Progress and Toast Components: 23 components
React Card, Accordion and Display Components: 67 components
React AI Chat and Agent Components: 20 components
React Chart and Data Table Components: 24 components
Animated React Icons: 2 components
React UI Sound Effects: 2 components
React Text Animations: 41 components
React Cursor Effects: 17 components
React Image Effects: 14 components
Interactive React Animations: 27 components
React UI Transitions and Micro-interactions: 23 components

Frequently asked questions

Do WebGL backgrounds slow down my site?: They are tuned to be light: one fragment shader, a capped pixel ratio, and rendering that stops when the background leaves the screen.
Do I need three.js?: No. Every shader background talks to WebGL directly in its own file, so there is no 3D library to install.
Can I change the colours?: Yes. Backgrounds read your theme tokens by default and take any CSS colour as a prop, and they follow light and dark mode.
Do these animated React backgrounds work with shadcn/ui?: Yes. Charcoal UI is a shadcn registry, so components install with the same CLI, use the same CSS variables and sit next to your existing shadcn components.