Processing State
A long job’s progress card, crowned by ferrofluid. The dish breathes with the work, surges as each of four steps completes, and settles to a mirror under the word “Balanced.”
Built with Ferrofluid
What it is for
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.
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
- Progress driven magnet, Step surge, Settle on completion, Pure job timeline, Polite per step announcements, Container query sheet to card
- Stack
- Vanilla ES modules, CSS, WebGL2
- Needs
- Ferrofluid
- States
- 11 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- Waiting to startThe working title at 0% and “Starting…”, every step waiting; nothing runs until 40% of the card is on screen.
- 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.
- Step completeThe step gets a filled check in the success colour and the magnet surges for half a second.
- 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.
- CancelledStops at once, releases the dish, says nothing was changed; Close / Start again.
- PalettePaper and night with a ceramic dish (graphite vanished into the dark card), sage with a polished steel dish.
- TabletFrom container width 560px a 480px card centred over the app's main area.
- PhoneUnder 560px a full-width bottom sheet with a 22px top radius over the app's header.
- DesktopFrom 900px a 520px card over the whole app (a sidebar and the table, blurred under a scrim).
- 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.
- Off screen or hiddenThe dish pauses itself; the block's frame loop runs only while the job runs.
Notes
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.
Anatomy
Progress driven magnet, Step surge, Settle on completion, Pure job timeline, Polite per step announcements, Container query sheet to card
Usage notes
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.
Options
| Option | Type | Description |
|---|---|---|
| app | text | In the app behind the card. |
| kicker | text | Kicker |
| title | text | Title while working |
| sub | text | Line under it |
| doneTitle | text | Gets a full stop. |
| doneSub | text | Line when done |
| review | text | Button when done |
| steps | text | “Label: count unit; …”, up to four. |
| seconds | number | The demo’s job. In production, drive it from your own progress events. |
| palette | enum | Paper or night with a ceramic dish, sage with polished steel. |
| density | number | Spike density |
| sharpness | number | Spike sharpness |
| light | number | 0 is from above, clockwise. |
Methods
- update
- phase
- progress
- fluid
- root
- destroy
How it works
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.