Interaction / component

Lattice Loader

A compact status indicator with ten sequenced cell patterns, a timer, and crisp success and error marks.

Example

Preparing preview…

Take it with you.

SOURCE ACCESS

Preview freely. Unlock the files.

Enter the shared password to copy the complete source, download every file, and install components in your app.

Access lasts 24 hours. Your preview settings stay with you.

Component notes

All ten upstream cell sequences, both grids, custom pattern support, glow, state crossfades and elapsed-time formatting are retained.
Some patterns target a specific grid: arrow/dots/ripple/spiral use 3×3; sweep/spin/rain/pulse use 4×4. Orbit/snake support both. Unsupported combinations use the upstream grid fallback (orbit or sweep).
Use LatticeLoader.tsx with working/done/error and optional controlled elapsed seconds. The local demo supplies completion, interruption and retry actions. Labels announce state changes without reading every timer tick.
Pause preserves interaction state. Replay deliberately restarts the demo. Reduced motion removes decorative loops; background and offscreen work is suspended.
Full portable source, styles and notices are included; import the primitive for your own product context.
Compact and Status expose caller working/done/error controls. Task completes only after three real checkbox actions unless your caller explicitly supplies status. No new success timer is used.
New compact/status/task source has wrapped long labels and retains state through Pause/Replay. The original Demo and primitive/defaults remain unchanged; the legacy Demo explicitly restarts its local scene on Replay.

React 19.2Modern browsers

React Bits — David Haz · MIT + Commons Clause; reuse separately authorized. Exact notice bundled.

Props

Prop	Type	Default	Description
`pattern`	string	`orbit`	Pattern; see primitive interface for full options.
`grid`	3 \| 4 (contexts also accept "3" \| "4")	`3`	Two preserved grids. Unsupported named pattern/grid combinations use the original orbit/sweep fallback.
`shape`	string	`round`	Cell shape; see primitive interface for full options.
`color`	string	`currentColor`	Cells; see primitive interface for full options.
`cellSize`	number	`6 (primitive); 7 (scenes)`	Cell size; see primitive interface for full options.
`step`	number	`90`	Step duration; see primitive interface for full options.
`glow`	boolean	`false (primitive); true (scenes)`	Glow; see primitive interface for full options.
`showTimer`	boolean	`True`	Timer; see primitive interface for full options.
`paused`	boolean	`false`	Suspend decoration without changing caller state, retained text, local input or results.
`replayToken`	number	`0`	Restart decoration while retaining caller state and local work in the new contexts. Legacy Thought/Lattice Demo explicitly restarts its synthetic interaction.
`label`	string	`Thinking`	Caller working label.
`doneLabel`	string	`Done in`	Caller done label.
`errorLabel`	string	`Failed after`	Caller error label.
`status`	working \| done \| error	`working`	Authoritative caller state; never inferred from animation or elapsed time.
`doneColor`	string	`#22c55e`	Primitive success cells; scene defaults use a brighter mint.
`errorColor`	string	`#ef4444`	Primitive error cells; scene defaults use a brighter coral.
`gap`	number pixels	`2`	Gap between original lattice cells.
`fontSize`	number pixels	`14`	Status label size.
`idleOpacity`	number	`0.15`	Unlit cell opacity.
`glowColor`	string	`empty`	Optional independent glow; empty uses current cell/mark color.
`elapsed`	number seconds	`undefined`	Optional controlled duration. Functional timer does not complete the request.
`className`	string	`empty`	Extra primitive classes.
`style`	CSSProperties	`undefined`	Optional styles, including primitive CSS variables.