Backgrounds
Liquid metal
Raymarched blobs of liquid chrome with an iridescent film. They merge, split and reach for the pointer.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { LiquidMetal } from '@vizzele/react/gl';
<LiquidMetal blobs={5} iridescence={0.55} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
blobs | number | 5 | Number of blobs (max 8). |
size | number | 1 | Blob size. |
iridescence | number | 0.55 | Oil-slick film on the chrome. |
speed | number | 0.6 | Motion speed. |
follow | number | 1 | How much blobs chase the pointer. |
colors | string[] | iridescent palette | Four hex colors. |
Accessibility
- The canvas is aria-hidden and never takes pointer events — content on top stays fully interactive.
- Pauses when off-screen or in a background tab. Renders one still frame with reduced motion.
- Weak devices get a lower resolution automatically; without WebGL2 a static gradient is shown.