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

Block · With a Pass · https://tactileui.dev/blocks/processing-state

> The code and styling for this block 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

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

## States

1. **Waiting to start**: 
2. **Working**: Percent, time left and per-step counts advance along a timeline that eases within each step.
3. **Step complete**: The step gets a filled check in the success colour and the magnet surges for half a second.
4. **Done**: The field is let go and zeroed.
5. **Cancelled**: Stops at once, releases the dish, says nothing was changed; Close / Start again.
6. **Palette**: Paper and night with a ceramic dish (graphite vanished into the dark card), sage with a polished steel dish.
7. **Tablet**: 
8. **Phone**: 
9. **Desktop**: 
10. **Reduced motion**: The 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 hidden**: The dish pauses itself; the block's frame loop runs only while the job runs.

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