Ferrofluid
Ferrofluid in a dish. It gathers toward the pointer and erupts into sharp spikes, then melts back into a trembling puddle. Your pointer is the magnet.
What it is for
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.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Sdf raymarching, Rosensweig threshold, Hysteresis, Hex spike lattice, Damped particle body, Spring magnet, Procedural studio lighting, Adaptive render scale, Sleeping loop, Audio reactive
- Stack
- Vanilla ES modules, CSS, WebGL2, Canvas 2D
- Needs
- Nothing, no dependencies
- States
- 12 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restA smooth black puddle in its dish, reflecting the studio; the loop is asleep and costs nothing.
- Opening passOnce, when the pool first comes into view, a magnet passes over it: the fluid gathers, erupts and melts back.
- 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.
- 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.
- Idle orbitWith idle on, a virtual magnet circles slowly when no pointer is near, so a hero is never still. It pauses off screen.
- ListeningAfter a click on a microphone button, spike height follows the room's loudness. Stops, with every track released, on unlisten or destroy.
- Off screen or hiddenThe loop pauses; a returning tab cannot launch the springs with a long frame.
- Reduced motionOne still frame of the spiked state under a centred magnet, on the first paint. No frames after it.
- Software rendererDetected at start-up: instead of a slideshow, one full-resolution, anti-aliased still is built up in strips without blocking the page.
- CompilingThe shader compiles in the background; the page is usable at once and the fluid fades in when its first frame is ready.
- 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.
- Context lostThe loop stops and waits; when the context is restored the shader is rebuilt and the frame redrawn.
Notes
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.
Anatomy
Sdf raymarching, Rosensweig threshold, Hysteresis, Hex spike lattice, Damped particle body, Spring magnet, Procedural studio lighting, Adaptive render scale, Sleeping loop, Audio reactive
Usage notes
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.
Options
| Option | Type | Description |
|---|---|---|
| strength | number | How far the field reaches. Past the threshold the surface erupts; a stronger magnet raises more of the pool. |
| density | number | Spikes across the resting pool: the lattice spacing. |
| sharpness | number | 0 is soft rounded bumps; 1 is tall needles with a fine point. |
| volume | number | Fluid volume |
| viscosity | number | How it settles. Thin fluid springs up and wobbles; thick fluid oozes. |
| vessel | enum | A shallow dish, a wide plate, or free on the backdrop. |
| finish | enum | Auto keeps the dish a light glaze on every finish, because the black fluid reads only against one: the white of the finish’s light family, bone ceramic, or white porcelain on Porcelain and Black. Or pin one: glazed bone ceramic, polished steel or brass, anodised graphite. |
| light | number | 0 is from above, clockwise. |
| idle | boolean | A virtual magnet circles slowly when no pointer is near, for a hero that is never still. It never sleeps while visible. |
| intro | boolean | A magnet passes over the pool once, when it first comes into view. |
| quality | enum | Low is for weak machines; high is full resolution. |
| label | text | What a screen reader hears. Empty describes the pool and its vessel. |
Methods
- update
- magnetAt
- release
- replay
- listen
- unlisten
- listening
- state
- stats
- frame
- destroy
How it works
Original. WebGL2 raymarching with no library; the studio, the dish and the fluid are all procedural, so no image ships.