Ferrofluid

A magnetic liquid-metal blob that grows spikes and reaches a tendril toward the cursor.

canvasmetaballsinteractive

Customize

Spikes9

Spike length0.55

Droplets4

Core size0.22

Surface tension1

Lower fuses blobs from farther apart.

Speed1

Wobble0.6

Spin0.12turn/s

Follow pointer

Magnet strength0.6

Magnet reach260px

Fluid color

Highlight

Glow0.55

Sheen0.6

Prop	Type	Default	Description
`color`	`string`	`"142,116,255"`	Body color of the fluid as "r,g,b".
`highlight`	`string`	`"186,230,255"`	Specular / rim sheen color as "r,g,b".
`spikes`	`number`	`9`	Number of magnetic spikes growing from the core.
`spikeLength`	`number`	`0.55`	How far spikes reach past the core (fraction of its radius).
`droplets`	`number`	`4`	Free droplets that orbit and merge back into the mass.
`coreSize`	`number`	`0.22`	Core radius as a fraction of the smaller canvas edge.
`threshold`	`number`	`1`	Metaball merge iso level; lower = gooier, higher = tighter.
`wobble`	`number`	`0.6`	How much each spike pulses in and out (0–1).
`speed`	`number`	`1`	Master animation speed multiplier (0 = frozen).
`spin`	`number`	`0.12`	Rotation of the spike crown, in turns per second.
`glow`	`number`	`0.55`	Outer glow / bloom intensity around the silhouette (0–1).
`sheen`	`number`	`0.6`	Strength of the top-lit specular sheen (0–1).
`pointerReactive`	`boolean`	`true`	Draw the fluid toward the pointer like a magnet.
`magnetStrength`	`number`	`0.6`	How hard the mass leans toward the pointer (0–1).
`magnetReach`	`number`	`260`	Pointer distance (px) within which the tendril reaches out.
`children`	`ReactNode`	`—`	Content layered above the canvas.
`className`	`string`	`—`	Extra classes for the wrapper.