MetallicPaint
metallic-paintRenders liquid metallic paint with noise distortion, color dispersion, and striped reflections.
Usage
Basic usage
A liquid metal paint background covered with dark containers, which can be superimposed with centered text.
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.12 0.01 255)" }}>
<MetallicPaint className="opacity-95" />
<div className="relative z-10 flex h-full items-center justify-center text-sm text-white/70">
Metallic Paint
</div>
</div>High liquid flow
Turn up liquid and speed, the metal surface looks like flowing mercury.
<MetallicPaint liquid={1} speed={1.4} className="opacity-95" />Strong refractive iridescence
Improve refraction and strengthen the three-channel dislocation of RGB, and match chart to achieve iridescent color dispersion.
<MetallicPaint
refraction={1.8}
lightColor="var(--color-chart-2)"
className="opacity-95"
/>Static mirror
Lower liquid/refraction/speed and raise blur to get a flat mirror metal.
<MetallicPaint
liquid={0.1}
refraction={0.5}
speed={0.4}
blur={1}
className="opacity-95"
/>When to Use
Use it for a full-surface liquid-metal background with refractive iridescence and striped gradients, such as a hero, brand page, or card surface. For a regular animated border, use BorderBeam or ShineBorder; for discrete merging blobs, use MetaBalls. MetallicPaint is designed as a background beneath foreground content.
Import
import { MetallicPaint } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| lightColor | string | var(--color-chart-1) | High-gloss metallic color (highlight peak). CSS color or token prefixed with --color- |
| darkColor | string | var(--color-foreground) | Dark metallic color (trough shadow) |
| speed | number | 1 | Metal flow velocity factor, 0≈ stationary (still extremely slow drift) |
| scale | number | 1 | Texture scale; higher values produce denser detail |
| refraction | number | 1 | Refraction intensity; higher values make RGB separation and iridescence more visible |
| liquid | number | 0.6 | Liquid disturbance intensity, the larger it is, the more like flowing mercury, 0 = flat mirror surface |
| blur | number | 0.6 | The edge of the ribbon is blurred, 0.2–1.5 is recommended; if it is too small, the stripes will be stiff, and if it is too large, the metallic feeling will disappear |
| angle | number | -45 | Overall rotation angle (degrees), changing the incident direction of light |
| className | string | — | Passthrough to container (or fallback div) |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | reduced-motion / static replacement without WebGL (default token metal gradient div) |
Usage Guidelines
- Token values passed through
lightColorordarkColormust use the--color-prefix; the shader cannot parse a barevar(--primary). See [[hulian-token-color-var-needs-color-prefix]]. - WebGL/ogl component,
"use client"is only client-side rendering; see [[webgl-canvas-loseContext-poisons-strictmode-remount]] for the risk of canvas context reuse under StrictMode dual mounting. - The parent container needs
overflow-hiddento cut off the excess metal pattern; remember to giverelative z-10to the text layer when stacking copy.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.12 0.01 255)" }}>
<MetallicPaint
speed={1}
scale={1}
refraction={1}
liquid={0.6}
blur={0.6}
angle={-45}
className="opacity-95"
/>
</div>