Lattice Loader

Inline agent-status row: a 3x3 or 4x4 lattice whose cells brighten in a phase-offset wave beside a verb and a live stopwatch, resolving into a check or a cross when the task ends.

Default

Switch Status to Done or Error to see the lattice resolve into a check or a cross while the stopwatch freezes. Pattern options depend on the grid size.

Thinking, in progress

Customize

Status

Pattern

Grid

Shape

Ink

Done

Error

Cell Size6px

Gap2px

Font Size14px

Step90ms

Idle Opacity0.15

Glow

Glow Color

Show TimerLabelDone LabelError Label

API Reference

LatticeLoader

Prop	Type	Default	Description
`label`	`string`	`'Thinking'`	The verb while working.
`doneLabel`	`string`	`'Done in'`	The verb after status turns to done. The frozen time follows it.
`errorLabel`	`string`	`'Failed after'`	The verb after status turns to error.
`status`	`'working' \| 'done' \| 'error'`	`'working'`	Drives everything: the wave runs, or freezes and dissolves into a check or a cross while the stopwatch stops.
`pattern`	`string \| { cells, loop?, scale?, lit? }`	`'orbit'`	The wave geometry. At 3 x 3: arrow, dots, orbit, ripple, snake, spiral. At 4 x 4: sweep, spin, rain, pulse, orbit, snake. A custom object gives one delay per cell in step units (null for a hole), an optional loop and scale, and lit: the share of the cycle a cell stays bright (0.25, 0.35, 0.45 or 0.62).
`grid`	`3 \| 4`	`3`	Cells per side. Each size has its own set of patterns and its own check and cross.
`shape`	`'square' \| 'round'`	`'round'`	Rounded tiles or dots.
`color`	`string`	`'currentColor'`	Ink for the cells, the verb and the stopwatch. Inherits the page colour by default.
`doneColor`	`string`	`'#22c55e'`	Colour of the check.
`errorColor`	`string`	`'#ef4444'`	Colour of the cross.
`cellSize`	`number`	`6`	Cell side in pixels.
`gap`	`number`	`2`	Seam between cells in pixels.
`fontSize`	`number`	`14`	Verb size in pixels. The stopwatch and row gap scale with it.
`step`	`number`	`90`	Milliseconds between neighbouring cells lighting. The whole loop scales with it.
`idleOpacity`	`number`	`0.15`	How visible the dark silhouette is.
`glow`	`boolean`	`false`	A halo on the lit cells and the mark.
`glowColor`	`string`	`''`	The halo colour. Empty follows the ink, and the mark colour for the mark.
`showTimer`	`boolean`	`true`	Shows the live stopwatch.
`elapsed`	`number`	`undefined`	Controlled elapsed seconds. When set, the internal clock never runs.

Accessibility

Keyboard shortcuts and ARIA behavior.

The row is a status region. A visually hidden line announces the state, for example "Done in 3.2 seconds", and the animated parts are hidden from screen readers.
With prefers-reduced-motion the cells pulse together instead of travelling in a wave.

Jelly Radio Paper Crumple