Ferrofluid

A hero, a cover or an empty state that a visitor plays with before reading anything: a real material responding to their hand, lit like a product photograph, that sleeps and costs nothing when left alone.

Copy the ferrofluid folder from its package next to your page, link its stylesheet and construct it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="ferrofluid/ferrofluid.css">
<div id="ferrofluid" style="width: min(94vw, 1100px); height: min(70vh, 520px); border-radius: 16px; overflow: hidden; background: #d8d4cc"></div>

<script type="module">
  import Ferrofluid from './ferrofluid/ferrofluid.mjs';

  const ferrofluid = new Ferrofluid(document.getElementById('ferrofluid'), {
    strength: 1,
    density: 13,
    sharpness: 0.7,
  });

  // ferrofluid.update({ … });   change any option in place
  // ferrofluid.destroy();        and take it away again
</script>

new Ferrofluid(element, options)

Builds it inside the element with these options.

update(opts = {})

Change options in place.

magnetAt(x, y, strength = 1)

Hold a magnet at a point given as fractions of the element (0…1).

release()

Take the magnet away; the spikes melt back.

replay()

Run the opening pass again.

listen(source)

Let sound drive the magnet.

unlisten()

Stop listening: a microphone's tracks stopped and its audio context closed; a page's node disconnected.

listening

state

stats

What the renderer is doing, for a page that wants to show it (or a test).

frame()

Draw the current state now, synchronously.

destroy()

Stops it and cleans up after it.

1. At restA smooth black puddle in its dish, reflecting the studio; the loop is asleep and costs nothing.
2. Opening passOnce, when the pool first comes into view, a magnet passes over it: the fluid gathers, erupts and melts back.
3. Magnet nearThe fluid leans and flows toward the pointer, heaps under it, and past the critical field erupts into spikes on a hexagonal lattice, tallest under the magnet and leaning toward it.
4. ReleasedThe field fades on a slower spring; spikes survive down to a lower threshold, collapse with a wobble, and the surface trembles with fine rings that die away.
5. Idle orbitWith idle on, a virtual magnet circles slowly when no pointer is near, so a hero is never still. It pauses off screen.
6. ListeningAfter a click on a microphone button, spike height follows the room's loudness. Stops, with every track released, on unlisten or destroy.
7. Off screen or hiddenThe loop pauses; a returning tab cannot launch the springs with a long frame.
8. Reduced motionOne still frame of the spiked state under a centred magnet, on the first paint. No frames after it.
9. Software rendererDetected at start-up: instead of a slideshow, one full-resolution, anti-aliased still is built up in strips without blocking the page.
10. CompilingThe shader compiles in the background; the page is usable at once and the fluid fades in when its first frame is ready.
11. No WebGL2A 2D drawing of the spiked pool in its dish, lit from the same lamp as the shader; the text alternative says it is a still.
12. Context lostThe loop stops and waits; when the context is restored the shader is rebuilt and the frame redrawn.

Made of: Sdf raymarching, Rosensweig threshold, Hysteresis, Hex spike lattice, Damped particle body, Spring magnet, Procedural studio lighting, Adaptive render scale, Sleeping loop, Audio reactive.

Original. Taken from the physical Rosensweig instability and from product photography of ferrofluid, not from a catalogue reference, so references is honestly empty. WebGL2 raymarching with no library; the studio, the dish and the fluid are all procedural, so no image ships.

• 04.1Speaker LaunchA speaker launch where the product works on the page.
• 04.2Dark HeroA dark editorial hero over black ferrofluid.
• 04.3Processing StateA long job’s progress card, crowned by ferrofluid.