WebGL Shader Backgrounds for React
Full-viewport backdrops rendered in fragment shaders, each a single React component with no Three.js dependency. Light effects like a logo flare and a prism, fluid and smoke simulations, embers and beams, a cloud deck seen from altitude, and a ray-marched torus quantised into terminal glyphs.
11 components · Browse all components
Logo Flare
Turn any logo into a light source. The SVG becomes a distance field lit with a white-hot core, halo, needle flares, and soft petals over film grain.
Prism
Light through glass. Soft streaks bend across the frame with true chromatic dispersion: blue on one edge, amber on the other, white in the core.
Skywriter
A stunt plane skywrites around your headline. Its smoke hangs in the sky, drifts, puffs up, and dissolves while the next lap is drawn.
Wind Tunnel
Streamlines of real potential flow bend around an invisible wing where your headline sits, with smoke pulses and a turbulent wake.
Cloud Sea
The window seat: a cloud deck seen from altitude, drifting forward under a blue-hour sky with cirrus overhead.
Paper Planes
A flock of paper planes that streams around your headline, chases the pointer, and leaves long-exposure light trails.
Ink
A GPU fluid simulation the pointer paints with coloured ink. Ambient splats keep it moving when nobody is touching it.
Slipstream
Diagonal luminous ribbons rendered in a fragment shader. They drift, thin to hairlines toward the top, and part around the cursor.
Embers
A slow fire in a fragment shader. Coals burn white along the bottom edge, flames lick up through heat haze, and sparks lift into the dark and wink out. The pointer stirs it.
Beams
Saturated ribbons raked across black, broken into grain by a noise mask instead of blurred into haze. They drift on their own and lean with the pointer. Pure CSS, no canvas.
ASCII WebGL
A ray-marched torus rendered as a live terminal. Every frame is quantised into a monospace grid of glyphs by luminance, drawn by a bitmap font baked into the shader. Tilts toward the pointer.