React Caustics Background
Animated underwater caustics background for React and Next.js — bright waving Voronoi-like light net that dances across a deep blue pool of water, rendered on a low-res canvas with a palette LUT for buttery 60fps performance.
React Caustics Background preview
The bright, ever-shifting net of light you see on the bottom of a swimming pool on a sunny day. Two layers of inline value noise are fed through a cosine fold so that where the noise field is steep we get a razor-thin bright caustic edge, and where it's flat the water stays deep and dark. The whole thing renders on a tiny offscreen buffer with a 256-entry palette lookup, so the mood (deep water → aqua → white-hot peaks) is a single prop away. Perfect for aquatic product heroes, meditation apps, diving and travel marketing, and any landing page that wants to feel like it's breathing underwater.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this background for you — no copy-paste, no CLI:
use shadcnio to install the caustics background into my projectRelated Components
Underwater
Drifting bubbles in murky water
Voronoi
Tessellated cell pattern
Wavy
Stacked flowing wave lines
Aurora
Emerald northern-lights sheets
Light Waves
Ambient vertical color washes
Ripple
Concentric water ripples
FAQ
Was this page helpful?
Sign in to leave feedback.