A swirl of liquid metal
| Name | Type | Default | Description |
|---|---|---|---|
width | string | number | "100%" | Container width |
height | string | number | "100%" | Container height |
className | string | "" | Additional CSS classes for styling |
children | ReactNode | undefined | Content rendered above the effect |
speed | number | 1 | Animation speed multiplier (0.01–3.0) |
zoom | number | 6 | Zoom level of the pattern (1–30) |
iterations | number | 12 | Number of flow iterations (1–12). More iterations = more complex swirls |
sampleGap | number | 0.095 | Sampling epsilon for gradient computation (0.01–0.5) |
tangentForce | number | 0.75 | Tangent flow strength per iteration (0–2) |
gradientForce | number | 0.15 | Gradient push strength per iteration (0–1) |
colorPhaseR | number | 3.11 | Color phase offset for red channel (0–6.28) |
colorPhaseG | number | 3.11 | Color phase offset for green channel (0–6.28) |
colorPhaseB | number | 3.11 | Color phase offset for blue channel (0–6.28) |
colorRange | number | 0.75 | Color saturation range (0–1) |
colorBias | number | 0.5 | Color midpoint brightness (0–1) |
brightness | number | 1 | Overall brightness multiplier (0–3) |
backgroundColor | string | "#000000" | Background color in hex |
opacity | number | 1 | Master opacity (0–1) |
cursorInteraction | boolean | false | Enable cursor interaction to intensify flow turbulence near pointer |
cursorIntensity | number | 1 | Cursor effect strength multiplier (0–3) |
widthstring | numberContainer width
"100%"heightstring | numberContainer height
"100%"classNamestringAdditional CSS classes for styling
""childrenReactNodeContent rendered above the effect
undefinedspeednumberAnimation speed multiplier (0.01–3.0)
1zoomnumberZoom level of the pattern (1–30)
6iterationsnumberNumber of flow iterations (1–12). More iterations = more complex swirls
12sampleGapnumberSampling epsilon for gradient computation (0.01–0.5)
0.095tangentForcenumberTangent flow strength per iteration (0–2)
0.75gradientForcenumberGradient push strength per iteration (0–1)
0.15colorPhaseRnumberColor phase offset for red channel (0–6.28)
3.11colorPhaseGnumberColor phase offset for green channel (0–6.28)
3.11colorPhaseBnumberColor phase offset for blue channel (0–6.28)
3.11colorRangenumberColor saturation range (0–1)
0.75colorBiasnumberColor midpoint brightness (0–1)
0.5brightnessnumberOverall brightness multiplier (0–3)
1backgroundColorstringBackground color in hex
"#000000"opacitynumberMaster opacity (0–1)
1cursorInteractionbooleanEnable cursor interaction to intensify flow turbulence near pointer
falsecursorIntensitynumberCursor effect strength multiplier (0–3)
1