# Trip Computer

An instrument cluster as a stats band. An odometer with red tenths, a trip meter whose Reset winds the drums back to nought, the range counting down. One preset turns it into a SaaS band.

Block · With a Pass · https://tactileui.dev/blocks/trip-computer

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Tally driven instruments, Rolling reset to zero, Speed tape needle, Visibility gated drive, Pausable live updates, Palette tokens from one table

## Usage notes

Give live numbers the weight of instruments: a car configurator or fleet dashboard gets a trip computer that behaves like the real one; a product site gets a stats band whose figures carry and blur like parts, instead of text that changes.

## Options

| Option | Type | Description |
| - | - | - |
| mode | enum | A car’s trip computer, or the same strip as a product’s live stats band. |
| units | enum | Kilometres and km/h, or miles and mph (the car preset). |
| headline | text | Empty uses the preset’s own. |
| pace | number | How much faster than life the drive runs. |
| drive | boolean | Starts driving when the strip comes into view. Visitors can park it with the toggle. |
| palette | enum | Amber, like a seventies cluster at night, or ice blue. |
| finish | enum | Drums |
| light | number | Light from (degrees) |

## Methods

- gauges
- reset
- update
- destroy

## States

1. **At rest**: The four drum counters stand on the preset’s values under the cluster glass; the tape shows the reading; nothing runs until the strip is in view.
2. **Driving**: In view with Drive on.
3. **Reset**: Reset (or Deploy) winds the trip back through every figure to nought with the low drums blurred, lands exactly, and a polite status line confirms it.
4. **Parked**: 
5. **Platform preset**: Requests served and since-deploy tally at the request rate, p95 latency wanders, uptime holds; Deploy winds the since-deploy counter back.
6. **Units and backlight**: Kilometres or miles (every distance and speed converted, labels and headline changed); amber or ice-blue backlight from one token table.
7. **Tablet**: Head in one column; the instruments two by two.
8. **Phone**: Status and toggle on one line with the tape below; odometer and trip full width, range and average side by side.
9. **Reduced motion**: Tallies step without rolling, the needle and switch jump; every number still updates.
10. **Off screen or hidden**: Every tally stopped and the timer cleared; it resumes when back.

## How it works

Original composition; the figures and the platform are invented. Imagery is CSS only (cluster glass, speed tape).