KQ-1507 · LATTICE/WAIT
Lattice Wait
A loading indicator that weaves itself: a thread draws from dot to dot of a small lattice along a seeded walk that turns more than it runs straight, forming a pattern segment by segment, holding it, then unweaving from its tail, and each cycle starts where the last ended with the next seed, so the patterns never repeat but never vary between renders; the dot the thread reaches pops as it arrives. When the work is done the thread lets go, the dots glide one after another on springs.glide onto a check mark (or a cross) whose stroke draws through them on the enter ease, and they dissolve into it; back to loading the mark undraws and the dots glide home. The root is a role="status" whose text changes only with the status.
Syncing 24 notes
From Fieldline Desktop
weaving · 4×4 lattice
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/lattice-wait
Props
- status
- "loading" | "success" | "error"
- default "loading"
- Weaving while loading; collapsing into a check or a cross when done.
- label
- string
- default "Loading"
- The status text while weaving.
- successLabel
- string
- default "Done"
- The status text once it succeeds.
- errorLabel
- string
- default "Failed"
- The status text if it fails.
- showLabel
- boolean
- default false
- Show the status text beside the lattice; otherwise it is for assistive technology only.
- grid
- number
- default 4
- Dots on each side of the lattice, 3 to 5.
- pace
- number
- default 1
- Weaving speed: 1 draws five threads a second.
- hold
- number
- default 420
- How long each finished pattern holds before it unweaves, in ms.
- seed
- number
- default 7
- Seeds the walks; the same seed weaves the same patterns on the server and in the browser.
- color
- "cobalt" | "signal" | "ember" | "rose" | string
- default "cobalt"
- The thread and the lit dots: a preset tuned for both themes or any CSS colour.
- successColor
- string
- default "var(--success)"
- The check's colour.
- errorColor
- string
- default "var(--danger)"
- The cross's colour.
- size
- "sm" | "md" | "lg"
- default "md"
- The lattice's box: 28, 44 or 64 px.
- paused
- boolean
- default false
- Hold the weave still where it is.
- onSettle
- (status: "loading" | "success" | "error") => void
- default —
- Fires when the lattice has finished collapsing into its mark, or back into the weave.
- className
- string
- default —
- Classes for the status root.
| Prop | Type | Default | Description |
|---|---|---|---|
| status | "loading" | "success" | "error" | "loading" | Weaving while loading; collapsing into a check or a cross when done. |
| label | string | "Loading" | The status text while weaving. |
| successLabel | string | "Done" | The status text once it succeeds. |
| errorLabel | string | "Failed" | The status text if it fails. |
| showLabel | boolean | false | Show the status text beside the lattice; otherwise it is for assistive technology only. |
| grid | number | 4 | Dots on each side of the lattice, 3 to 5. |
| pace | number | 1 | Weaving speed: 1 draws five threads a second. |
| hold | number | 420 | How long each finished pattern holds before it unweaves, in ms. |
| seed | number | 7 | Seeds the walks; the same seed weaves the same patterns on the server and in the browser. |
| color | "cobalt" | "signal" | "ember" | "rose" | string | "cobalt" | The thread and the lit dots: a preset tuned for both themes or any CSS colour. |
| successColor | string | "var(--success)" | The check's colour. |
| errorColor | string | "var(--danger)" | The cross's colour. |
| size | "sm" | "md" | "lg" | "md" | The lattice's box: 28, 44 or 64 px. |
| paused | boolean | false | Hold the weave still where it is. |
| onSettle | (status: "loading" | "success" | "error") => void | — | Fires when the lattice has finished collapsing into its mark, or back into the weave. |
| className | string | — | Classes for the status root. |