Ferrofluid
ferrofluidSimulates pointer-responsive metallic ferrofluid ridges with flowing rim highlights.
Usage
Basic usage
Liquid metal ferrofluid background; the default ribbon is chart token, and the liquid level is concave at the mouse point.
<div className="relative h-56 overflow-hidden rounded-xl bg-neutral-950">
<Ferrofluid />
<div className="relative z-10 flex h-full items-center justify-center text-white/80">
Ferrofluid
</div>
</div>Custom ribbon + flow direction
The colors array maps color bands according to height gradients, and flowDirection controls the overall drift direction of the peak ridge.
<Ferrofluid
colors={[
"var(--color-chart-3)",
"var(--color-chart-1)",
"oklch(0.78 0.2 50)",
]}
flowDirection="up"
glow={2.6}
/>High turbulence · Sharp ridges
Increase turbulence, decrease fluidity, and increase sharpness to get sharper and clearer metal peaks and ridges.
<Ferrofluid turbulence={2.2} fluidity={0.04} sharpness={3.5} speed={0.8} />Wallpaper level (slow speed and large scale)
Slow + Large scale + Turn off mouse interaction, suitable for silent hero background overlay copywriting.
Hulian component library
Liquid Metal · WebGL · Theme adaptive
<div className="relative h-56 overflow-hidden rounded-xl bg-neutral-950">
<Ferrofluid speed={0.25} scale={2.4} glow={2.4} mouseInteraction={false} />
<div className="relative z-10 flex h-full flex-col items-center justify-center gap-1">
<p className="text-lg font-semibold text-white">Hulian Component Library</p>
<p className="text-xs text-white/60">Liquid Metal · WebGL · Theme Adaptive</p>
</div>
</div>When to Use
Use it for a liquid-metal glow behind a brand hero or product page. Use Galaxy for deep-space depth, DotPattern or GridPattern for geometric texture, or Spotlight for a lightweight pointer focus. Ferrofluid is designed around flowing metallic ridges that deform under the pointer.
Import
import { Ferrofluid } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| colors | string[] | --color-chart-1/2/4 | Up to eight fluid colors mapped from low to high across the height field; accepts any CSS colors |
| speed | number | 0.5 | Animation-speed multiplier |
| scale | number | 1.6 | Noise scale; higher values create finer texture and values below 0.05 are clamped |
| turbulence | number | 1 | Turbulence intensity, 0 = nearly stationary smooth liquid surface |
| fluidity | number | 0.1 | Smoothness of ridge blending; higher values look more fluid, with a lower limit of 0.001 |
| rimWidth | number | 0.2 | Highlight edge width |
| sharpness | number | 2.5 | Highlight gamma; higher values tighten the bright bands |
| shimmer | number | 1.5 | Low-light variation that creates metallic flashes |
| glow | number | 2 | Overall glow multiplier |
| flowDirection | "up" | "down" | "left" | "right" | "down" | Overall ridge-drift direction |
| opacity | number | 1 | Overall opacity, range 0–1 |
| mouseInteraction | boolean | true | Lets the pointer depress the liquid field and suppress bright bands |
| mouseStrength | number | 1 | Pointer influence intensity, only effective when mouseInteraction=true |
| mouseRadius | number | 0.35 | Normalized pointer influence radius |
| mouseDampening | number | 0.15 | Pointer-following damping in seconds; 0 follows immediately |
| dpr | number | min(dpr, 2) | Upper limit of device pixel ratio, lower it to save GPU |
| className | string | — | Root container (or div) |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | Static non-WebGL content for SSR, reduced motion, or unavailable WebGL; defaults to a radial gradient |
Usage Guidelines
- OGL/WebGL renders on the client. SSR and unavailable WebGL show the radial-gradient fallback.
- Place the root in a
relative overflow-hiddencontainer with an explicit height. - Metallic highlights read best against a dark background; light surfaces reduce their contrast.
- On high-resolution displays, pass
dpr={1}to reduce GPU cost. Higherturbulenceandshimmervalues increase fragment-shader work.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.13 0.02 265)" }}>
<Ferrofluid
speed={0.5}
scale={1.6}
glow={2}
flowDirection="down"
mouseInteraction={true}
/>
</div>