Tote
A ranked bar race — the racetrack tote board. Rows that change rank physically slide past each other FLIP-style, the overtaker lifting over its neighbor with a soft shadow before seating flush; bars re-measure with a spring, values roll to their new numbers, and the leader's value carries a subtle brightness edge. Feed it frames and it plays the classic bar-chart race on an interval (suspended offscreen), politely announcing lead changes. Includes a segmented category-proportion variant.
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/toteManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ToteItem[] | Rows of the board. Input order also assigns ramp colors and breaks ties. | |
| frames | ToteFrame[] | Race mode: a time series of value snapshots the board steps through automatically. When provided, frame values override items[].value. | |
| interval | number | 2 | Seconds each race frame holds before the next lands. |
| loop | boolean | true | Restart the race from frame 0 after the last frame. |
| sort | "desc" | "asc" | "desc" | Rank order: highest value first, or lowest first. |
| reorder | boolean | true | Animate rank changes FLIP-style so rows slide past each other. When false the board still re-sorts and bars still spring, but rows swap instantly. |
| maxRows | number | Show at most this many rows; movers animate in and out at the cutoff. | |
| spring | ToteSpring | Spring used for row FLIP slides and bar width re-measures. | |
| format | (value: number) => string | Formats a value for display (also used mid-roll on interpolated values). | |
| rollDuration | number | 0.6 | Seconds a value takes to roll to its new number. 0 snaps. |
| colors | string[] | a cool analogous family | Color ramp assigned to items by input order (cycled) when an item carries no color of its own. |
| rowHeight | number | 36 | Row height in px (also sizes the category bar at a third). |
| gap | number | 8 | Gap between rows in px. |
| labelWidth | number | 96 | Width of the label column in px. |
| variant | "bars" | "category" | "bars" | Render one segmented proportion bar (segments re-negotiate widths on change) instead of the ranked bar list. Segments keep input order. |
| showFrameLabel | boolean | true | Show the current frame's caption above the board while racing. |
| paused | boolean | false | Suspends race playback. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"div">, "children"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.