# Kart Live Timing block

> Live kart race timing on a 3D circuit, with a gap to leader ladder, live standings and a driver card

Live timing for a 20 lap kart race: 15 karts lap a 3D circuit you orbit or a 2D plan, with a gap to leader ladder, live standings and a driver card. ReUI Frame, Badge; shadcn ToggleGroup, ButtonGroup, Spinner; React Three Fiber, Motion. Live timing, motorsport.

- Type: Pro block
- Category: [Digital Twin](https://reui.io/blocks/solutions/digital-twin.md)
- Page: https://reui.io/blocks/solutions/digital-twin/solution-digital-twin-2
- MCP: `get_block("solution-digital-twin-2")`
- Built with: Badge, Button, Button Group, Frame, Spinner, Toggle Group
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

A dark live timing screen for a short race, where a kart picked on the circuit, the plan, the ladder or the standings is followed everywhere

## Agent notes

- Replace `progressOf`, `standingsAt`, `bestLapOf`, `FASTEST` and the `raceClock` demo loop in data.ts with your timing feed; `ROSTER` holds the drivers
- `CONTROL` in track-geometry.ts shapes the circuit and is rescaled to `LAP_METRES`; the 1,200 m and 14 corners label is separate, in `CIRCUIT`
- `RaceConsole` takes no props and keeps the selection inside, so a live feed means adding props for the standings and the roster

## When not to use

- A results table of laps, best times and points after the race, with no circuit to watch: use the [Base blocks](https://reui.io/blocks/data-grid/base.md)

## Third-party libraries

- three.js: [API reference](https://threejs.org/docs/), [docs](https://threejs.org/manual/#en/fundamentals) (pre-1.0, so any 0.x release (r186 here) can change the API, and threejs.org documents only the latest)
- React Three Fiber v9: [API reference](https://r3f.docs.pmnd.rs/api/canvas), [docs](https://r3f.docs.pmnd.rs/getting-started/introduction)
- camera-controls v3: [API reference](https://yomotsu.github.io/camera-controls/classes/CameraControls.html), [docs](https://github.com/yomotsu/camera-controls#readme)
- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react) (the docs follow the latest Motion, with no React API break since v12)

## Install

```bash
npx shadcn@latest add @reui/solution-digital-twin-2
```

## About Digital Twin blocks

### When to use

- Match day tickets sold by sector, the sector picked on a 3D stadium bowl you orbit or on a 2D seating plan
- Live race timing, karts lapping a 3D circuit and one pick shared by the plan, the gap ladder and the standings
- A 3D model of a physical place that shares its selection with a 2D plan and the panels around it

### When not to use

- A diagram of nodes and edges for a process or a system, not a physical place: use the [Flow blocks](https://reui.io/blocks/application/flow.md)
- A month card of upcoming fixtures and their kickoff times, with no venue or seats to pick: use the [Schedule blocks](https://reui.io/blocks/application/schedule.md)
- Venue or site figures as KPI tiles and charts, with nothing to pick in a scene: use the [Dashboard blocks](https://reui.io/blocks/application/dashboard.md)

### Agent notes

- `@react-three/fiber` lists React 19 as a peer, so a React 18 app must upgrade React before adding a block
- `three` ships no type declarations, so a TypeScript project also needs @types/three as a dev dependency
- Both consoles pin the `dark` class on their root, so they render dark inside a light app whatever its theme

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.