React WebGL Backgrounds
Forty components that render on the GPU through a WebGL context: fragment-shader gradients, particle fields, fluid simulations, an agent-based slime mould, rain running down a pane of glass, a raymarched black hole. Thirty-four use ogl, a wrapper small enough that the whole bundle costs less than one hero image. Six use Three.js, where the scene really does need a scene graph. All of them size to their container and halt the render loop when the tab is hidden.
39 components · live previews
In This Collection
Waves
A woven field of flowing waves rendered on a WebGL line shader.
Built with ogl
Grainient
An animated grainy mesh-gradient rendered on a WebGL2 shader.
Built with ogl
Light Rays
Volumetric god-rays from a configurable origin, optionally following the mouse.
Built with ogl
Side Rays
Corner-anchored two-color light rays with adjustable tilt and blend.
Built with ogl
Strands
Glowing wavy light-strands with an optional glass refraction lens.
Built with ogl
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.
Built with ogl
Shadowflame
A black flame with an amethyst core, its body folded from domain-warped noise.
Built with ogl
Cathode
A cathode-ray tube slowed down until you can watch it work: the beam paints a test card line by line, and the phosphor it leaves behind fades until the next pass comes round.
Built with ogl
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.
Built with ogl
Quicksilver
Molten chrome. Every other shader background emits light. This one reflects a studio that does not exist, built out of the surface normal: sharp softbox edges, a conductor's Fresnel wash, thin-film iridescence, and a wake that keeps moving where you dragged.
Built with ogl
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.
Built with ogl
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. The trail exists only above the drop that made it.
Built with ogl
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.
Built with ogl
Ferrofluid
A pool of magnetic fluid rendered as a per-pixel metaball field. A handful of blobs orbit on closed integer-harmonic paths and merge wherever their fields overlap. The cursor is a magnet held over the pool: the surface reaches toward it, and inside its influence the iso-edge erupts into the radial spike crown that makes ferrofluid unmistakable. Lighting is free, because the metaball gradient is analytic, so the same loop that sums the field also yields the surface normal for the specular sheen and the amethyst rim, with no extra field evaluations.
Built with ogl
MoirePro
Two lattices stacked at a fraction of a degree apart, beating against each other into live interference fringes. Every layer is band-limited in the shader, so what you see is the interference and not the sampling.
Built with ogl
DitherPro
A live field crushed to one bit through an ordered threshold matrix. The only background here that looks better the cheaper it gets, and the only one that runs the same on a decade-old laptop as on a workstation.
Built with ogl
Sakura TreePro
A painterly toon-shaded 3D cherry-blossom scene with wind-driven falling petals.
Built with three
CausticsPro
Light through moving water. The filaments are the zero crossings of a noise field folded back on itself, not its peaks — which is why they stay thin and hard-edged at any brightness instead of blooming into blobs. The lattice is periodic, so the flow offset wraps and the motion never coarsens over a long session.
Built with ogl
Voronoi ShatterPro
Lit cells that fracture apart under the pointer and knit back together behind it. The seam is drawn from the gap between the two nearest seeds rather than the distance to the nearest one, so it holds an even width right through the vertices where three cells meet — and the shatter displaces the space rather than the seeds, so no cell ever swaps neighbours mid-fracture.
Built with ogl
Molten
Type that melts. Letters sag under their own weight, string out, and fuse into one surface where they touch, because the glyphs are a coverage field cut by a threshold rather than shapes being moved: two stems raise the coverage between them past the cut and one outline closes over both. The word underneath is a real text node the whole time, so it stays selectable, searchable, and read correctly aloud while it runs.
Built with ogl
InlayPro
A live shader material poured into real letterforms — molten rock, aurora, chrome, embers, tide. The text stays a real text node at transparent, so it is still selectable, searchable and read aloud exactly once while something genuinely animated fills it.
Built with ogl
Refract
A frosted-glass slab you drag across a live scene, refracting it through a real shader optic. A rounded-rect height field bends three separately-sampled color channels along its gradient, with a Fresnel-bright rim, a travelling specular streak, and a frost that is a genuine multi-tap blur of what sits beneath the pane. Where Lens bends its DOM children through an SVG displacement map and magnifies, Refract is a flat pane over a scene texture with true angle-of-incidence refraction, dispersion and glare, and the scene it bends is drawn in the same shader, because no browser lets WebGL read the rendered page. Throw it and it glides on momentum, rubber-banding off the container walls.
Built with ogl
Intro AnimationPro
A wind front sweeps the wordmark right to left. The instant it reaches a glyph the text hands off to a baseline-aligned field of GPU grain — same pixels, same colour, no seam — which peels crown-first and drifts away as smoke through a curl field. The backdrop opens behind it to reveal the page. Mount it over your app and unmount on onDone.
Built with ogl
Black Hole
A real-time Schwarzschild black hole raytraced per-pixel in a WebGL2 shader. Null geodesics bend a lensed accretion disk over the event horizon, with Doppler beaming, gravitational redshift, a photon ring, and a lensed starfield, all under a cinematic orbit.
Built with ogl
Vortex Bloom
A molten-gold-and-obsidian vortex funnel spiraling into a luminous SDF core, either lotus, gem, or flame, raymarched per-pixel in a WebGL2 shader, with a GPU dust field spiraling down the flow toward the throat, all under a draggable orbit and a real two-pass bloom.
Built with ogl
Smoke Field
A real-time GPU fluid you can stir. Semi-Lagrangian advection, a Jacobi pressure solve, and vorticity confinement run every frame across ping-ponged float buffers, injecting a dark amethyst plume that curls, billows, and bleeds through the frame wherever you drag.
Built with ogl
Ripple Field
A pool of dark, moonlit water you disturb by hand. A leapfrog solve of the 2D wave equation runs on a ping-ponged float field, ringing every pointer move outward, reflecting the swell off the walls, and lighting the surface with gradient-normal refraction, curvature-focused caustics, and a Fresnel glint riding each wavefront.
Built with ogl
Umbral Orrery
An orrery of moons casting real eclipse shadows across a shadowed world; drag to orbit.
Built with three
Ascii Engine
A lit, raymarched 3D solid rendered at exactly one pixel per character cell, then quantised into a glyph ramp drawn once with fillText. Drag to orbit it through a full three-sixty. Real geometry underneath, terminal on top, with no scene graph, no mesh, and no second library to get there.
Built with ogl
Swarm
Up to a quarter of a million particles integrated entirely on the GPU, morphing between words and solids, with a drag-orbit camera. Position and velocity live in floating-point textures and never come back to the CPU. Text targets are sampled once out of an offscreen canvas, so the shape can be any string with no font atlas.
Built with ogl
Rubiks CubePro
A Rubik's cube that scrambles and solves itself on an endless loop while spinning like a planet. Two independent rotation layers, and every quarter-turn is quantised back to exact integers, so an hour of turns drifts by nothing at all.
Built with three
MonolithPro
A monumental slab floating over a reflective grid floor, rendered as a fogged 3D scene you can orbit.
Built with three
Shard OrbitPro
A giant crystal monolith turning on its axis in a glitter field, or a halo or helix of instanced shards lit by the pulsing core, drag-orbited beside left-aligned copy, fully GPU-driven.
Built with ogl
Grid HorizonPro
A synthwave horizon in one fragment shader. A glowing grid floor, a banded sun, parallax ridges and a pulse rolling out of the vanishing point.
Built with ogl
Warp RunPro
A star-streak tunnel rendered as velocity-stretched lines; the pointer steers, dragging banks the ship.
Built with ogl
Eclipse FlarePro
A total eclipse under liquid-glass copy: a streamered corona, a diamond-ring flare on the breath, god-rays marched through drifting cirrus in one jittered pass.
Built with ogl
TidalPro
A dusk ocean under flat, left-aligned copy: noise-warped swells with wind ripple, sunlit crests, a sun path and breaking foam, raymarched in one bounded pass.
Built with ogl
Liquid ChromePro
A liquid-chrome form of fused spheres over a black mirror floor: rectangular studio softboxes, one mirror bounce and soft occlusion, sphere-traced in one pass beside left-aligned copy.
Built with ogl
HanamiPro
A painterly 3D cherry-blossom hero: a toon-shaded tree over an unbroken meadow, wind-driven petals drifting across left-anchored copy, orbitable by drag.
Built with three