# Odometer Teardown

The Odometer comes apart along its axle as you scroll: the face plate with its window, five number drums, the carry pinions that hand a turn from one drum to the next, the axle, the side frames and the drive gear, each casting its shadow on the bench from one lamp.

Block · With a Pass · https://tactileui.dev/blocks/odometer-teardown

> 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

## Use it

With a Pass, install it with npx shadcn add @tactile/odometer-teardown (https://tactileui.dev/docs/registry-and-mcp). It lands in tactile/odometer-teardown/, with what it is built with beside it.

Load the stylesheet as well as the module, or it renders unstyled: tactile/odometer/odometer.css and tactile/odometer-teardown/odometer-teardown.css. In a bundler such as Vite, import each CSS file next to the module import; in plain HTML, link it.

Then mount(element, options, { Odometer }) from tactile/odometer-teardown/odometer-teardown.mjs. Every option has a default; tactile/odometer-teardown-example.html shows it running. The sample copy (headings, labels, figures) is placeholder: replace it with the page's own.

## Anatomy

Scroll driven exploded view, Sticky pinned frame, Spring smoothed progress, Strip walls lit by normals, Lamp true cast shadows, Pre blurred shadow crossfade, Projected leader labels, Object drawing reuse, Container query layout

## Usage notes

Prove that an interface part is built like hardware: a product-page section where a real object, the Odometer, is taken apart along its axle while the visitor scrolls, each part named by a leader line and given its turn with one line on what it does, and the carry pinions explaining the one thing a drum counter does that a number ticker cannot. The physics is in the light: every face and wall is lit by one lamp, and every part's shadow on the bench grows, softens and slides away from that lamp as it rises.

## Options

| Option | Type | Description |
| - | - | - |
| kicker | text | Printed small above the heading. Empty leaves it out. |
| title | text | Heading |
| lede | text | Left out on a short screen, where the counter needs the room. |
| finish | enum | Auto takes the page’s own finish tokens if it has them (any of the twelve), then its data-finish, then the visitor’s system. The brass, the steel and the zinc are what they are in every finish. |
| spacing | number | How far apart the parts stand along the axle, as a share of the default gap. The counter is sized so the whole row fits. |
| captions | boolean | The card with each part’s line. Off, the lines are still read out to a screen reader. |

## Methods

- odometer
- scene
- progress
- go
- update
- destroy

## States

1. **Closed**: At the top of the section the counter stands assembled, larger than it will be parted.
2. **Opening**: The plate rises clear and draws back to stand over the row; the twelve pieces part evenly along the axle on the Odometer's own spring; the axle and the pinion shaft grow with them; each shadow slides away from the lamp, widens and pales with the height; the labels fade in with their leaders.
3. **A part on show**: In its share of the scroll the part rises clear and turns to the camera; its label, leader and dot go to full ink, its stop key presses and lights green, the card shows its name and line, and a polite live region reads them.
4. **The carry pinions**: The four pinions lift out of their bays, grow, and turn to the camera; the bays open so the tooth that stands out of each drum's left face is seen beside the pinion it picks up, and the pinion shaft lifts with them.
5. **Closing**: After the drive gear the parts settle back into each other, the plate comes down onto the drums, the shadows draw in to contact patches, and the counter grows to its closed size; the card says the counter is back together.
6. **Stop keys**: Six keys, one per part, scroll to its turn (smoothly, or at once with reduced motion); the one on show is aria-current.
7. **Finishes**: On a page carrying the kit's tokens the housing, the drums and the figures take that finish, any of the twelve, through a live Odometer; on its own, aluminium (bone drums in a steel housing) or graphite (ink drums in anodised metal). The brass, the steel and the zinc are what they are; a dark room gets black zinc.
8. **Phone**: Heading, stage, card and keys in one column, three keys to a row, only the part on show named. A short frame drops the sentence, then the kicker.
9. **Reduced motion**: No travel: the scroll position picks a still, closed or apart with that part on show, and the keys jump there at once. Every line is still read.
10. **Off screen**: Nothing runs: the spring sleeps when it settles and no frame is asked for while the section is out of view.

## How it works

Original. The face plate is the Odometer's own housing, cloned from a counter mounted out of sight, with its window cut through and its glass kept; the drums are printed in the Odometer's own figures on its own drum colour; the gears, the frames and the rods are drawn here in the Detent Dial's shading model, the brass and the steel the dial's own.