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.
Built with Odometer
What it is for
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.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Tally driven instruments, Rolling reset to zero, Speed tape needle, Visibility gated drive, Pausable live updates, Palette tokens from one table
- Stack
- Vanilla ES modules, CSS, Css 3d transforms
- Needs
- Odometer
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restThe 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.
- DrivingIn view with Drive on: the odometer and trip tally up in tenths, the range down, the needle glides, the lamp is lit; every 3–6 s the speed wanders and the average rolls toward it.
- ResetReset (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.
- ParkedA real toggle with aria-pressed stops every tally and the timer (WCAG 2.2.2); the lamp goes hollow, the status reads Parked.
- Platform presetRequests served and since-deploy tally at the request rate, p95 latency wanders, uptime holds; Deploy winds the since-deploy counter back.
- Units and backlightKilometres or miles (every distance and speed converted, labels and headline changed); amber or ice-blue backlight from one token table.
- TabletHead in one column; the instruments two by two.
- PhoneStatus and toggle on one line with the tape below; odometer and trip full width, range and average side by side.
- Reduced motionTallies step without rolling, the needle and switch jump; every number still updates.
- Off screen or hiddenEvery tally stopped and the timer cleared; it resumes when back.
Notes
Original composition; the figures and the platform are invented. Imagery is CSS only (cluster glass, speed tape). Faces: Jura and Outfit (SIL OFL 1.1), Latin subsets as WOFF2.
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
How it works
Original composition; the figures and the platform are invented. Imagery is CSS only (cluster glass, speed tape).