Trip Computer

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.

Copy the trip-computer folder and the odometer folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="odometer/odometer.css">
<link rel="stylesheet" href="trip-computer/trip-computer.css">
<div id="trip-computer"></div>

<script type="module">
  import Odometer from './odometer/odometer.mjs';
  import { mount } from './trip-computer/trip-computer.mjs';

  const tripComputer = mount(document.getElementById('trip-computer'), {
    mode: 'car',
    units: 'km',
    headline: '',
  }, { Odometer });

  // tripComputer.update({ … });   change any option in place
  // tripComputer.destroy();        and take it away again
</script>

mount(element, options, { Odometer })

Builds the block inside the element and returns its handle. Hand it the Odometer it is built with.

handle.gauges

handle.reset(id = 'trip')

Reset an instrument by id ('trip' has the button): its drums wind back to nought.

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

1. 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.
2. 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.
3. 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.
4. ParkedA real toggle with aria-pressed stops every tally and the timer (WCAG 2.2.2); the lamp goes hollow, the status reads Parked.
5. Platform presetRequests served and since-deploy tally at the request rate, p95 latency wanders, uptime holds; Deploy winds the since-deploy counter back.
6. Units and backlightKilometres or miles (every distance and speed converted, labels and headline changed); amber or ice-blue backlight from one token table.
7. TabletHead in one column; the instruments two by two.
8. PhoneStatus and toggle on one line with the tape below; odometer and trip full width, range and average side by side.
9. Reduced motionTallies step without rolling, the needle and switch jump; every number still updates.
10. Off screen or hiddenEvery tally stopped and the timer cleared; it resumes when back.

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

Read more: How the Odometer carries · Odometer, odometer.js, NumberFlow.

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.

• 06OdometerA mechanical drum counter.

More blocks on the same object:

• 06.1Pricing DrumsA price printed on brass drums.
• 06.2Goal TallyA fundraiser’s total on big printed drums.
• 06.4Specimen CaseA bento of glass-topped compartments in a machined case, each holding one real Tactile object running small (the Odometer, the Flip-Dot, the Detent Dial, the Vessel) with an engraved label card under the glass.