Installation
Usage
import { LiquidMetal } from "@/components/liquid-metal"
export function Hero() {
return (
<LiquidMetal finish="chrome" className="flex min-h-[32rem] flex-col items-center justify-center px-6 text-center">
<h1 className="text-5xl font-semibold tracking-tight">Pour the light.</h1>
<p className="mt-3 text-muted-foreground">Move your pointer across the metal.</p>
</LiquidMetal>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| finish | "chrome" | "gold" | "iridescent" | "chrome" | The metal itself: polished chrome, warm gold, or chrome with an oil-slick film. |
| colors | string[] | [] (theme: --primary, --chart-2, --chart-4) | Two or three colours for the studio lights the metal reflects. Any CSS colour. |
| flow | number | 1 | How fast the metal flows, from 0 (still) to 3. |
| autoplay | boolean | true | When nobody is near, a lamp drifts across and now and then a drop falls. Off, the surface sleeps a few seconds after the pointer leaves. |
| interactive | boolean | true | The pointer drags ripples and carries the highlight; a press drops a ripple. Presses on links and buttons stay theirs. |
| scrim | boolean | true | A soft shade of the background behind the middle, so text over bright metal stays readable. Turn it off when nothing sits on top. |
| moment | number | undefined (flows) | Holds the flow still at this moment, in seconds of flow: a fixed shape for a calm hero, or the frame you capture. Ripples and the pointer still work. |
| captureRef | Ref<LiquidMetalHandle> | — | Gets { capture(width, height) }, which draws the surface as it is right now again at that size and resolves a PNG Blob: a 4K hero, a wallpaper, a social card. It works on a software renderer too, and rejects with a plain message when the device can't draw that size. |
| ...props | HTMLAttributes<HTMLDivElement> | — | Any div attribute. Your className is merged last, so it wins; size the background with it. |
Accessibility
- The canvas and its still image are decorative and hidden from assistive technology; your content is ordinary markup above them.
- A soft shade sits behind the middle, so text above keeps its contrast over bright highlights.
- With prefers-reduced-motion it shows one still frame and ignores the pointer.
- It pauses off-screen and in hidden tabs, and frees its GPU memory when removed.
- Without WebGL2, on a software renderer, or on a device that can't hold a smooth frame rate even at low resolution, it shows a still image in your theme colours.
Changelog
- v1.0.0Latest
First release.