Dial Teardown
The Detent Dial comes apart along its shaft as you scroll: cap, knurled body, scale plate, a brass detent ring with the pawl's roller sitting in a notch, and the back plate, each casting its shadow on the next from one lamp.
Built with Detent Dial
What it is for
Prove that an interface part is built like hardware: a product-page section where a real object, the Detent Dial, is taken apart along its axis while the visitor scrolls, each part named by a leader line and given its turn with one line on what it does, then closed up again.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 10 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
- Detent Dial
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- ClosedAt the top of the section the dial stands assembled in the middle of the stage, the knob's shadow on its scale plate, the plates stacked on their seam; the card says six parts and invites the scroll.
- OpeningThe parts rise apart along the shaft on the dial's own spring; each shadow slides away from the lamp, widens and pales with the height; the dial moves aside for its labels, which fade in with their leaders.
- A part on showIn its share of the scroll everything above the part lifts clear so it is seen whole; 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 detent ring and pawlThe scale plate lifts away: the brass ring shows its eleven V notches and the stop sector over the throat, and the pawl's hardened roller sits in the notch for the value the knob points at.
- ClosingAfter the back plate the parts settle back into each other and the shadows draw in to a contact shadow; the card says the dial 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 scale plate, the printing and the knob take that finish, any of the twelve; on its own, aluminium or graphite. The brass, the spring 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, labels without their numbers; 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 parts below grows, softens and slides away from that lamp as they part.
Original. The knob is the Detent Dial's own drawing, cut from a dial mounted out of sight, and its scale is cloned from it; the ring, the pawl and the back plate are drawn here in the dial's shading model, the brass in the dial's own numbers. 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 Detent Dial, is taken apart along its axis while the visitor scrolls, each part named by a leader line and given its turn with one line on what it does, then closed up again. The physics is in the light: every face and wall is lit by one lamp, and every part's shadow on the parts below grows, softens and slides away from that lamp as they part.
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 dial 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 spring steel and the zinc are what they are in every finish. |
| spacing | number | How far apart the parts stand, as a share of the default gap. The dial is sized so the whole stack fits. |
| captions | boolean | The card with each part’s line. Off, the lines are still read out to a screen reader. |
Methods
- dial
- progress
- go
- update
- destroy
How it works
Original. The knob is the Detent Dial's own drawing, cut from a dial mounted out of sight, and its scale is cloned from it; the ring, the pawl and the back plate are drawn here in the dial's shading model, the brass in the dial's own numbers.