KQ-617 · CARD/ORDER
Card Order
A card on its way to you: a miniature slab rides a rail above the stops and slides to the one the order has reached on glide, landing on recoil at the last stop where a tick stamps into the final dot. The rail fills behind it and each reached dot flicks in on a cascade, so a jump of two stages lights in sequence. Under the rail the day count rolls on snap and the date cross-fades.
KQ-617 · CARD/ORDER
Replacement cardWaylight · CBK-4417-2FNo fee···· 4417
- Printed, doneFernworks press
- Posted, waitingColdbrook depot
- Out for delivery, waitingOn the van
- Delivered, waitingAt your door
Arrives
Printed. Arrives in 4 days, Thu 14 Mar.
Order CBK-4417-2F · Printed · Arrives in 4 days
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/card-order
Props
- stage
- number
- default 0
- Index of the furthest stop reached; clamped to the stage list.
- stages
- OrderStage[]
- default printed / posted / out for delivery / delivered
- The stops in order; each carries an id, a label and a short note.
- etaDays
- number
- default 3
- Days until arrival; the digits roll when the estimate tightens.
- etaDate
- string
- default "Thu 14 Mar"
- The date under the count; cross-fades when it changes.
- deliveredNote
- string
- default "Signed for at the door"
- Replaces the estimate once the last stop is reached.
- network
- string
- default "Waylight"
- Wordmark printed beside the order reference.
- last4
- string
- default "4417"
- Last four digits of the card on its way.
- fee
- number
- default 0
- Replacement fee; zero prints "No fee".
- format
- (value: number) => string
- default Intl.NumberFormat USD
- Formats the fee; the order never invents a currency.
- reference
- string
- default "CBK-4417-2F"
- Order reference, printed mono and selectable.
- label
- string
- default "Card order"
- Names the group for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| stage | number | 0 | Index of the furthest stop reached; clamped to the stage list. |
| stages | OrderStage[] | printed / posted / out for delivery / delivered | The stops in order; each carries an id, a label and a short note. |
| etaDays | number | 3 | Days until arrival; the digits roll when the estimate tightens. |
| etaDate | string | "Thu 14 Mar" | The date under the count; cross-fades when it changes. |
| deliveredNote | string | "Signed for at the door" | Replaces the estimate once the last stop is reached. |
| network | string | "Waylight" | Wordmark printed beside the order reference. |
| last4 | string | "4417" | Last four digits of the card on its way. |
| fee | number | 0 | Replacement fee; zero prints "No fee". |
| format | (value: number) => string | Intl.NumberFormat USD | Formats the fee; the order never invents a currency. |
| reference | string | "CBK-4417-2F" | Order reference, printed mono and selectable. |
| label | string | "Card order" | Names the group for assistive technology. |