Stint Bar
A car's tyre strategy as one bar: a segment per stint in its compound colour, filling up to the lap the car is on.
The fill edge is a CSS transition of a clip over the laps still to come, not a motion component, so a grid of twenty bars updating together stays cheap. It uses the shared easing and duration tokens and stops moving under reduced motion.
A stint with no compound draws neutral with a question mark: stint cuts and compounds often come from different sources, and a missing compound should not hide the stint.
Preview
Lap 0 / 57
- EVONo stints in 57 laps
- MSONo stints in 57 laps
- TRENo stints in 57 laps
- NVANo stints in 57 laps
Playground
The race distance, which is the whole width of the bar.
Off shows the whole strategy at once, as a finished race would.
Advance the lap on a timer. Off holds the lap below.
The lap the cars are on while the race is not running.
Bar height. The small one never shows compound letters.
Installation
Register the boxbox namespace once per project:
bunx shadcn@latest registry add @boxbox=https://react-boxbox.vercel.app/r/{name}.jsonThen add the component:
bunx shadcn@latest add @boxbox/stint-bar
Props
| Name | Type | Default | Description |
|---|---|---|---|
| totalLaps | number | 57 | The race distance, which is the whole width of the bar. |
| showCurrentLap | boolean | true | Off shows the whole strategy at once, as a finished race would. |
| animate | boolean | true | Advance the lap on a timer. Off holds the lap below. |
| currentLap | number | 24 | The lap the cars are on while the race is not running. |
| size | 'md' | 'sm' | md | Bar height. The small one never shows compound letters. |
Dependencies
No additional dependencies.