A churning magnetic fluid traced by glowing contour lines, with a cursor magnet.
Colors, flow and the cursor magnet are wired to the controls underneath. The fluid is drawn in a WebGL fragment shader.
| Prop | Type | Default | Description |
|---|---|---|---|
colors | string[] | ['#4F46E5', '#06B6D4', '#E0F2FE'] | Array of hex colors (up to 8) used to tint the fluid rim. Colors are spread across the surface by height; a single color makes the whole effect uniform. |
speed | number | 0.5 | Multiplier for how fast the fluid churns and flows. |
scale | number | 1.6 | Overall feature size. Higher values zoom in for larger, fewer blobs. |
turbulence | number | 1 | Amount of domain distortion. Higher values create more chaotic, swirling motion. |
fluidity | number | 0.1 | Smoothness of the merge between the two fluid layers. Higher = softer, more liquid blending. |
rimWidth | number | 0.2 | Thickness of the glowing contour lines tracing the fluid surface. |
sharpness | number | 2.5 | Contrast of the rim highlights. Higher values give crisper, thinner edges. |
shimmer | number | 1.5 | Amount of fine grainy break-up applied to the rim. 0 = smooth lines. |
glow | number | 2 | Overall brightness multiplier of the rim highlights. |
flowDirection | 'up' | 'down' | 'left' | 'right' | 'down' | Primary direction the fluid surface drifts. |
opacity | number | 1 | Overall alpha of the rendered canvas. |
mouseInteraction | boolean | true | Enables a magnetic spike that rises and glows under the cursor. |
mouseStrength | number | 1 | Intensity of the magnetic cursor spike. |
mouseRadius | number | 0.35 | Falloff radius of the magnetic cursor spike. |
mouseDampening | number | 0.15 | Easing time constant (seconds) for the cursor to follow the pointer. 0 = immediate. |
mixBlendMode | string | undefined | CSS mix-blend-mode applied to the canvas (e.g. 'screen', 'lighten'). |
paused | boolean | false | If true, stops rendering updates (freezing the current frame). |
dpr | number | window.devicePixelRatio | Overrides device pixel ratio; lower for performance, higher for sharpness. |
Keyboard shortcuts and ARIA behavior.