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.
Built with Odometer
What it is for
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.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 6 days. Want one email that morning?
Datasheet
- Mechanism
- 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
- Stack
- Vanilla ES modules, Css 3d transforms, Canvas 2D
- Needs
- Odometer
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- ClosedAt the top of the section the counter stands assembled, larger than it will be parted: the face plate in front with its window and its engraving, the five drums showing 10098 behind the glass, the frames and the axle's two ends; the card says six parts and invites the scroll.
- OpeningThe 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.
- A part on showIn 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.
- The carry pinionsThe 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.
- ClosingAfter 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.
- Stop keysSix keys, one per part, scroll to its turn (smoothly, or at once with reduced motion); the one on show is aria-current.
- FinishesOn 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.
- PhoneHeading, stage, card and keys in one column, three keys to a row, only the part on show named; the counter is turned further so the row is short enough to be drawn large; no sideways scroll at 390 px. A short frame drops the sentence, then the kicker.
- Reduced motionNo 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.
- Off screenNothing runs: the spring sleeps when it settles and no frame is asked for while the section is out of view.
Notes
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.
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. Faces: Instrument Sans and Geist Mono (SIL OFL 1.1), the kit's own, as WOFF2.
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
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.