Timing Tower
The running order of the whole field, with rows that slide as positions change and a value column that switches between gap, interval, and last lap time.
A row with a `finishStatus` other than `finished` stays listed while the race runs: it reads `OUT`, muted and faded, with no tags. In `results` mode the same row reads its finish status.
Give a row `positionsGained` (grid slot minus position, positive for a gain) and `results` mode shows it beside the result as `+5`, `−3` or `0`; add `pitLaneStart` and it is marked `PL`. A car that is not classified shows none. While the race runs the rows never show it; the default expanded panel does, when the followed row carries it.
onRowClick makes every row a button, followedId says which one the viewer is following, and that row expands under its line. The panel defaults to the figures the tower already holds; renderExpanded(row, ctx) replaces it and gets the rows ahead and behind in the shown order, so ctx.behind.interval is the gap back to the car behind. A followed car that goes OUT keeps its panel and its last figures.
Preview
Playground
Value column: gap to the leader, interval to the car ahead, last lap time, or the classification once the race is over.
How many positions to show.
Give the first N positions a subtle background.
Show the tyre compound and its age on each row.
Show the overtake tag when a car is in range.
DRS up to 2025, Overtake Mode from 2026.
In results mode, give each row its places gained against the grid; the car at the back started from the pit lane.
Let a click on a row follow that driver and expand it.
Simulator tick in ms
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/timing-tower
Props
| Name | Type | Default | Description |
|---|---|---|---|
| mode | 'leader' | 'interval' | 'lapTime' | 'results' | leader | Value column: gap to the leader, interval to the car ahead, last lap time, or the classification once the race is over. |
| maxRows | number | 10 | How many positions to show. |
| highlightTop | number | 3 | Give the first N positions a subtle background. |
| showTyre | boolean | true | Show the tyre compound and its age on each row. |
| showOvertake | boolean | true | Show the overtake tag when a car is in range. |
| overtakeMode | 'drs' | 'overtake' | drs | DRS up to 2025, Overtake Mode from 2026. |
| positionsGained | boolean | true | In results mode, give each row its places gained against the grid; the car at the back started from the pit lane. |
| followable | boolean | true | Let a click on a row follow that driver and expand it. |
| speed | number | 1500 | Simulator tick in ms |
Dependencies
- motion