KQ-797 · PARALLEL/FAN
Parallel Fan
A fan of parallel attempts spreading from one root: opening it sends each attempt to its place on the arc on glide in a cascade while its spoke draws behind it, each ring fills with its progress on glide and prints its score once done, and naming a winner gathers that node to the centre on glide with its ring landing on recoil while the rest fade on the exit ease. Positions are polar maths rounded to three decimals and laid out as percentages over an SVG underlay with a non-scaling stroke, so the fan fits any width. The attempts are buttons in a roving tabindex — Left and Right step, Home and End jump, Enter and Space pick.
Idle · press play
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/parallel-fan
Props
- attempts
- FanAttempt[]
- default —
- Two to six attempts in fan order: id, a short label, an optional model, progress 0..1, a status of running, done or failed, and a score 0..1 printed as a whole percentage.
- spread
- boolean
- default —
- Whether the fan is open; false stacks every attempt on the root.
- winner
- string
- default —
- The attempt gathered to the centre; the rest fade and leave the tab order.
- onSelect
- (id: string) => void
- default —
- Fires from an attempt press or key; the host usually sets winner from it.
- task
- string
- default —
- The root node's caption, printed under the stage.
- label
- string
- default —
- Names the group for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| attempts | FanAttempt[] | — | Two to six attempts in fan order: id, a short label, an optional model, progress 0..1, a status of running, done or failed, and a score 0..1 printed as a whole percentage. |
| spread | boolean | — | Whether the fan is open; false stacks every attempt on the root. |
| winner | string | — | The attempt gathered to the centre; the rest fade and leave the tab order. |
| onSelect | (id: string) => void | — | Fires from an attempt press or key; the host usually sets winner from it. |
| task | string | — | The root node's caption, printed under the stage. |
| label | string | — | Names the group for assistive technology. |