# 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.

Object · With a Pass · https://tactileui.dev/objects/ferrofluid

> The code and styling for this object come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## 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

## States

1. **At rest**: A smooth black puddle in its dish, reflecting the studio; the loop is asleep and costs nothing.
2. **Opening pass**: Once, when the pool first comes into view, a magnet passes over it: the fluid gathers, erupts and melts back.
3. **Magnet near**: The 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. **Released**: The 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 orbit**: With idle on, a virtual magnet circles slowly when no pointer is near, so a hero is never still. It pauses off screen.
6. **Listening**: After 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 hidden**: The loop pauses; a returning tab cannot launch the springs with a long frame.
8. **Reduced motion**: One still frame of the spiked state under a centred magnet, on the first paint. No frames after it.
9. **Software renderer**: Detected at start-up: instead of a slideshow, one full-resolution, anti-aliased still is built up in strips without blocking the page.
10. **Compiling**: The shader compiles in the background; the page is usable at once and the fluid fades in when its first frame is ready.
11. **No WebGL2**: A 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 lost**: The loop stops and waits; when the context is restored the shader is rebuilt and the frame redrawn.

## How it works

Original. WebGL2 raymarching with no library; the studio, the dish and the fluid are all procedural, so no image ships.