Ferrofluid

What it is

Ferrofluid is a magnetic liquid, a carrier fluid holding nanoscale magnetic particles, and when a strong enough magnet sits under a shallow dish of it the flat surface breaks into a crown of pointed spikes arranged on a hexagonal lattice. That is the Rosensweig normal-field instability, a threshold phenomenon: below a critical field the surface stays smooth, and above it the spikes stand up. This page is that dish. A magnet starts under the centre of the pool and holds up a crown of 37 spikes; drag the crown and the magnet follows under your pointer, the spikes re-forming on the lattice as it moves.

Everything you see is a lit 3D render in WebGL through three.js and react-three-fiber, not a fragment-shader trick and not a fluid simulation. The pool is one polar mesh of 128 rings by 512 sectors, and its vertex shader computes the surface height from the magnets directly: a dipole-style field strength that falls off as m/(d²+g²)^{3/2} from each magnet, summed over up to three of them; a smooth meniscus bump proportional to that field; and, wherever the field exceeds the critical value, a spike pattern built from three cosines at 60 degrees and sharpened into cusps, whose height grows as the square root of the excess. Normals come from central differences of the same height function, and the fragment shader shades the result with three Blinn–Phong lights, a Schlick Fresnel term and a procedural overhead softbox reflection, which is what makes the black liquid read as wet. The same formulas live in a plain TypeScript module with unit tests: the spike height is zero at and below the threshold and monotone above it, the lattice repeats at a constant pitch, and the crown shrinks rim-first as the magnet lifts.

The Strength dial lifts the magnet away from the surface rather than turning it down, because that is what a hand does with a real magnet, and the readout shows the on-axis field as a multiple of the critical field Bc, 4.93 Bc at full strength. Slide it down, or scroll over the dish, and the crown's footprint narrows from the rim inward until, at the tick marked on the track, the last spike vanishes and the surface goes flat; slide back up and the crown snaps into being again. Tap on open fluid to sink a second or third magnet, each blooming outward from its own centre as its field crosses the threshold, and drag two together to watch their crowns merge into a single ridge where the fields add. Right-drag, or a two-finger drag on a phone, orbits the dish. Reset sends the magnet home, removes the extras and restores full strength. Under reduced motion the crown still follows every gesture, without the eased chase and the sink-in tween.

This is a closed-form model of the instability, not magnetohydrodynamics. The lattice spacing is a constant standing in for the capillary length that sets it in a real fluid, the threshold is a chosen number, the square-root onset is the model's assumption, and the spikes know nothing of surface tension or gravity beyond the shape they are given. In the light and sunset themes it is a black object in a pale dish; in dark the dish darkens and the site's accent tints the highlights. What the model keeps is the part you can feel: a threshold, a snap, and a crown of spikes that chases a magnet.

How to use it

• Drag the crown to move the magnet under the dish.
• Tap open fluid to sink a second or third magnet; drag two together to merge their crowns.
• Slide Strength, or scroll over the dish, to lift the magnet; past the tick it snaps flat.
• Right-drag, or drag with two fingers, to orbit the dish.
• Reset sends the magnet home at full strength.

More experiments

• Rocky — webgl, three.js, r3f
• Eiffel Tower — webgl, three.js, r3f
• Weather Pixels — webgl, three.js, instancing

See every experiment