LiquidChrome
liquid-chromeCreates a reflective liquid-metal shader background with pointer distortion.
Usage
Basic usage
LiquidChrome itself is filled with absolute inset-0 and needs to be placed in the relative + overflow-hidden container; the default reading is --color-chart-2 following the theme.
<div className="relative h-48 overflow-hidden rounded-xl">
<LiquidChrome />
</div>Custom metallic color
baseColor can pass [r, g, b] (0–1) array or CSS color string to bring out metallic textures such as dark blue/dark copper.
<LiquidChrome baseColor={[0.18, 0.1, 0.03]} speed={0.25} amplitude={0.7} />High amplitude fast · non-interactive
interactive={false} Turn off mouse ripple; increase amplitude / speed to make the liquid level more intense.
<LiquidChrome interactive={false} amplitude={0.9} speed={0.45} frequencyX={3.5} frequencyY={2.5} />as Hero background layer
Raise the container and use z-10 to overlay the content on the liquid background.
Liquid Chrome
WebGL Liquid chromium metal flow background
<div className="relative h-72 overflow-hidden rounded-xl">
<LiquidChrome speed={0.18} amplitude={0.55} />
<div className="relative z-10 flex h-full flex-col items-center justify-center gap-2 text-center">
<p className="text-2xl font-bold text-white drop-shadow-md">Liquid Chrome</p>
<p className="text-sm text-white/70 drop-shadow">WebGL liquid chromium metal flow background</p>
</div>
</div>When to Use
Use when you need an area-wide, slow-flowing liquid metal/chrome reflective background (hero, landing page, card base). It absolute inset-0 covers the parent container and is the background layer rather than the focus element. If you want a luminous energy ball that focuses the line of sight and interacts with the pointer, use Orb; if you want a static, zero-cost geometric pattern, use DotPattern / GridPattern / StripedPattern.
Import
import { LiquidChrome } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| baseColor | [number, number, number] | string | var(--color-chart-2) | Liquid chrome base color. [r,g,b] is a floating point array of 0..1 (compatible with the original version of react-bits), or any CSS color string; the default reading is chart-2 token following the light and dark theme |
| speed | number | 0.2 | Flow-speed multiplier; higher values move faster |
| amplitude | number | 0.6 | Waveform amplitude (0 calm → 1 intense), controls the liquid surface distortion amplitude |
| frequencyX | number | 2.5 | X-direction spatial frequency |
| frequencyY | number | 1.5 | Y direction spatial frequency |
| interactive | boolean | true | Whether to respond to mouse/touch to push liquid surface ripples |
| className | string | — | ClassName passed through to canvas (normal) or fallback div (fallback) |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | reduced-motion / static content overlaid on a metallic gradient background without WebGL |
Usage Guidelines
- WebGL renders only on the client. Under SSR, without WebGL, or with reduced motion, the component uses a static metallic-gradient fallback, so account for the initial visual difference.
- Cleanup, do not use
loseContextto poison the canvas, otherwise the StrictMode double mount reused canvas will collapse into blank - see [[webgl-canvas-loseContext-poisons-strictmode-remount]], a new canvas will be created each time it is mounted. absolute inset-0for itself, the parent container must beposition:relativeand have a certain height, otherwise it will not be visible; remember to addrelative z-10for the content overlay.- Pass the
baseColorstring through CSS color parsing.var(--primary)may not be parsed. The token needs to be prefixed with--color-- see [[hulian-token-color-var-needs-color-prefix]].
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-64 overflow-hidden rounded-xl">
<LiquidChrome
speed={0.2}
amplitude={0.6}
frequencyX={2.5}
frequencyY={1.5}
interactive={true}
/>
{/*Content layer (z-10 superimposed on the background)*/}
<div className="relative z-10 flex h-full items-center justify-center">
<p className="text-white text-xl font-bold">Your Content</p>
</div>
</div>