React Mercury Background
Reflective liquid mercury background for React and Next.js — a glossy chrome surface ripples gently while a moving specular highlight sweeps across it, evoking an infinite polished-metal pool.
React Mercury Background preview
That futuristic feeling of staring into a pool of polished liquid metal — dark troughs, mid-grey plateaus, and a rogue specular highlight that sweeps across the surface like sunlight on chrome. Rendered on a tiny 192×108 offscreen canvas using a domain-warped sine field mapped through a non-linear chrome palette, so a handful of palette indices land on bright specular while most of the range stays mid-grey — the classic polished-metal reflection distribution. Zero dependencies, one RAF loop, 60fps on a mid-range laptop, and subtle chromatic aberration at the specular edges for extra realism. Perfect for premium SaaS hero sections, launch pages, futuristic product marketing, and any landing page that wants a "this is expensive hardware" atmosphere.
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 mercury background into my projectRelated Components
Metaballs
Viscous blobs that merge and separate
Silk
Flowing iridescent satin gradient
Gradient
Smooth ambient gradient wash
Mesh Gradient
Stripe/Linear-style blurred gradient blobs
Underwater
Caustic light patterns from above
Aurora
Emerald northern-lights sheets
FAQ
Was this page helpful?
Sign in to leave feedback.