Mercury Background for React

Liquid chrome fills the box: a polished metal sheet whose soft swells roll slowly, each with a bright band of light on its shoulder and a white highlight on its crest, while a broad streak of light sweeps across now and then. On a light page it's bright silver; on a dark one, graphite with cool highlights. Each of the two sheets is an SVG height field of smooth noise run through a chrome curve, the way polished metal reflects a sky and a horizon, then coloured in your theme; the browser draws it once, and CSS keyframes drift the two sheets in opposite directions, the second laid over the first, so their reflections meet and part. Only transforms animate, and no script runs.

Use it behind a product or launch page that wants a chrome, futuristic surface. For an iridescent foil, use Hologram; for a flowing satin sheen, Silk; for viscous blobs that merge and split, Metaballs; for veined stone made the same way, Marble.

Installation

Usage

import { Mercury } from "@/components/ui/mercury";

<Mercury className="flex min-h-[480px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Liquid metal</h1>
</Mercury>

Mercury is a container: whatever you put inside sits on top of the metal, in normal flow. It covers its own box edge to edge, so give it a height or content. The swells keep their size whatever the box, so a card shows a few and a full page many. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

Tint

tintColor colours the metal and keeps its light and shade, here gold. Any CSS colour works: a pale blue gives titanium, a rose gives copper.

Ripples

rippleScale sets the size of the swells: 2 gives a tight, disturbed surface and 0.6 a broad, still pool. intensity="subtle" lets more of the page through, so a card you put on top stays calm.

Accessibility

The metal is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion the sheets hold still and the streak is hidden, so a still chrome surface stays. Nothing flashes: the streak is soft and crosses once every 13 seconds.

Put copy over it in your foreground colour (text-foreground). The metal's tones are kept in a range text can sit on: at the default intensity the foreground colour keeps about 6.4:1 on a light page and 4.5:1 on a dark one over the content area at the worst frame. intensity="strong" deepens the troughs and brightens the crests; check small text against it.

FAQ

API Reference