KQ-585 · PARCEL/LINE
Parcel Line
A delivery that shows its own progress. The parcel glides between stops on glide and is placed from measured dot centres rather than a percentage, so it lands true on whichever row the stops wrapped onto at phone width; the stop it sits on breathes on drift, a reversing two-keyframe spring, while passed stops fill in order on flick through a cascade that keeps the run inside the 600ms budget. The stops are an ordered list with aria-current on the one in hand, and the ETA rolls when it changes and is announced politely.
Basinworks · BW-4412
- Collected08:10Passed
- Basinworks depot11:35Current stop
- In transit14:02To come
- Local hub16:48To come
- Doorstep18:40To come
Basinworks · BW-4412: stop 2 of 5, Basinworks depot. Arrival ETA 19:05.
Stop 2 of 5 · Basinworks depot
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/parcel-line
Props
- stops
- { id: string; label: string; time?: string }[]
- default —
- Ordered stops, first to last.
- current
- number
- default —
- Index of the stop the parcel is at; clamped to the run.
- eta
- string
- default —
- Formatted arrival, shown in the header and announced when it changes.
- label
- string
- default —
- Shipment name; names the region and opens the announcement.
| Prop | Type | Default | Description |
|---|---|---|---|
| stops | { id: string; label: string; time?: string }[] | — | Ordered stops, first to last. |
| current | number | — | Index of the stop the parcel is at; clamped to the run. |
| eta | string | — | Formatted arrival, shown in the header and announced when it changes. |
| label | string | — | Shipment name; names the region and opens the announcement. |