Processing State

Make a necessary wait feel held rather than stalled: the numbers say exactly where the job is, and a small physical thing does the waiting with the person (its agitation tracking the work, its stillness meaning done), so the outcome lands as relief.

Copy the processing-state folder and the ferrofluid folder from its package next to your page, link the stylesheets and mount 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">
<link rel="stylesheet" href="processing-state/processing-state.css">
<div id="processing-state"></div>

<script type="module">
  import Ferrofluid from './ferrofluid/ferrofluid.mjs';
  import { mount } from './processing-state/processing-state.mjs';

  const processingState = mount(document.getElementById('processing-state'), {
    app: 'Ledgewell',
    kicker: 'Closing Q3 2026',
    title: 'Balancing your books',
  }, { Ferrofluid });

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

mount(element, options, { Ferrofluid })

Builds the block inside the element and returns its handle. Hand it the Ferrofluid it is built with.

handle.update(next = {})

Change options in place.

handle.phase

handle.progress

handle.fluid

handle.root

handle.destroy()

Stops it and cleans up after it.

1. Waiting to startThe working title at 0% and “Starting…”, every step waiting; nothing runs until 40% of the card is on screen.
2. WorkingPercent, time left and per-step counts advance along a timeline that eases within each step; the active step's icon turns; the dish's magnet breathes at 0.9 Hz, deeper as the job advances, so early spikes rise and sink flat and late ones stay up; each step's name is announced once.
3. Step completeThe step gets a filled check in the success colour and the magnet surges for half a second.
4. DoneThe field is let go and zeroed: the spikes melt and the pool settles to a mirror and sleeps; the title turns to the done title in the success colour, 100% and “Done”, a badge scales in over the dish, the outcome is announced once; Run again / Review.
5. CancelledStops at once, releases the dish, says nothing was changed; Close / Start again.
6. PalettePaper and night with a ceramic dish (graphite vanished into the dark card), sage with a polished steel dish.
7. TabletFrom container width 560px a 480px card centred over the app's main area.
8. PhoneUnder 560px a full-width bottom sheet with a 22px top radius over the app's header.
9. DesktopFrom 900px a 520px card over the whole app (a sidebar and the table, blurred under a scrim).
10. Reduced motionThe numbers still advance, in whole percents with no easing; the icon does not turn; the dish never moves: its still is spiked while working and smooth once done.
11. Off screen or hiddenThe dish pauses itself; the block's frame loop runs only while the job runs.

Made of: Progress driven magnet, Step surge, Settle on completion, Pure job timeline, Polite per step announcements, Container query sheet to card.

Original composition; Ledgewell, the job and all copy are invented. The only imagery is the Ferrofluid and a CSS skeleton of an app. The job is simulated from a pure timeline for the demo; the card is meant to be driven by real progress events. Faces: Work Sans and DM Mono (SIL OFL 1.1) as WOFF2, licences beside them.

• 04FerrofluidFerrofluid in a dish.

More blocks on the same object:

• 04.1Speaker LaunchA speaker launch where the product works on the page.
• 04.2Dark HeroA dark editorial hero over black ferrofluid.