Specimen Case

A features section that shows a product's parts as specimens. The four objects are the library's own, mounted and run in their cases, not drawn to look like them; each sits behind glass with a card that says what it does for the product. A case is lit while the pointer is over it, focus is in it or its Light key is pressed (a tap on the glass pins it on for touch), and only a lit case does anything: the counter turns, the sign flips its message, the dial sweeps between notches, the liquid finds a new level. Off screen, in a hidden tab and under reduced motion nothing runs at all, so a page of dark cases costs nothing.

Copy the specimen-case folder and the odometer, flip-dot, detent-dial and vessel 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="flip-dot/flip-dot.css">
<link rel="stylesheet" href="detent-dial/detent-dial.css">
<link rel="stylesheet" href="vessel/vessel.css">
<link rel="stylesheet" href="specimen-case/specimen-case.css">
<div id="specimen-case"></div>

<script type="module">
  import Odometer from './odometer/odometer.mjs';
  import FlipDot from './flip-dot/flip-dot.mjs';
  import DetentDial from './detent-dial/detent-dial.mjs';
  import Vessel from './vessel/vessel.mjs';
  import { mount } from './specimen-case/specimen-case.mjs';

  const specimenCase = mount(document.getElementById('specimen-case'), {
    label: 'Specimens',
    title: 'Every part on the bench is real.',
    lead: 'Four of the parts Lode is built from, each in its own case. Light one from above and it wakes.',
  }, { Odometer, FlipDot, DetentDial, Vessel });

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

mount(element, options, { Odometer, FlipDot, DetentDial, Vessel })

Builds the block inside the element and returns its handle. Hand it the Odometer, Flip-Dot, Detent Dial and Vessel it is built with.

handle.objects

handle.lit

handle.light(id, on = true)

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

1. At restFour compartments in a machined case, a bento of two wide and two tall: each object at rest behind dimmed glass, its lamp dark, its card of text beneath. Nothing moves.
2. LitHover a compartment, focus into it, or press its Light key: the lens in its lid lights amber, a cone of light falls on the glass and the dim lifts over 320 ms. The count in the case's band says how many are lit. specimen-light fires.
3. RunningOnly a lit case runs: the Odometer counts runs at 2.4 a second, the Flip-Dot changes its message every 3 s in a wave, the Detent Dial sweeps between notches every 1.7 s (a hand on it stops the sweep), the Vessel finds a new level every 3.2 s. Unlit, each stops and the object holds still.
4. HandledThe objects are real: turn the dial, tap the glass of the Vessel, drag the Flip-Dot. The dial is a slider with its own keyboard.
5. TouchA finger on the glass lights the case and leaves it lit; the Light key turns it off. The key is 28px tall in a 34px lid.
6. KeyboardEach Light key is a button with aria-pressed named for its case; focus anywhere in a case lights it, and the Detent Dial takes the arrow keys.
7. Idle and off screenNo timer runs unless a case is lit, the block is on screen and the tab is visible; each stops when any of those stops holding.
8. TabletTwo columns: the Odometer and the Flip-Dot each across the width, then the dial and the vessel side by side.
9. PhoneOne column in reading order at 390px; the objects re-fit their glass; no sideways scroll.
10. Reduced motionNothing runs by itself: lighting a case only changes the light, without a fade, and the objects can still be handled.
11. FinishesAluminium and graphite by data-finish; the objects follow (bone drums and steel, or ink drums and graphite; an aluminium or graphite dial; white discs; mercury).

Made of: Real objects in deps, Lit only runs, Container query bento, Lamp cone and dim, Light key aria pressed, Touch pins light, One timer per lit case, Sleep off screen and hidden, Reduced motion static, Object finish mapping, Finish following.

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

Original composition on the Odometer (06.4: the counter is the object the case is numbered under; the block runs four objects and lists them all): Lode and its copy are invented. The Odometer, the Flip-Dot, the Detent Dial and the Vessel arrive in deps and are never imported by the block; each is constructed in its compartment and dressed by the finish. The case, the wells, the lamps, the keys, the glass and the cards are CSS drawn in the kit's tokens; no image. Faces: Instrument Sans and Geist Mono (SIL OFL 1.1); the Odometer keeps its own.

• 06OdometerA mechanical drum counter.
• 03Flip-DotThe flip-disc sign from buses and stations.
• 02Detent DialA rotary control you count by feel.
• 07VesselA glass of liquid as a gauge.

More blocks on the same object:

• 02.1Synth PanelA synthesiser’s live front panel.
• 02.2ThermostatA home-climate section with a glazed ceramic dial.
• 02.3Hi-Fi VolumeAn amplifier hero in walnut and brushed brass.
• 03.1Departures BoardA departures board of flip-dot lines under an enamel fascia.
• 03.2ScoreboardA match centre round a flip-dot scoreboard.
• 03.3Venue MarqueeA club’s site on the night, under a brass flip-dot marquee.
• 06.1Pricing DrumsA price printed on brass drums.
• 06.2Goal TallyA fundraiser’s total on big printed drums.
• 06.3Trip ComputerAn instrument cluster as a stats band.
• 07.1Reading ProgressA long read with a test tube for a progress bar.
• 07.2Crowdfund FlaskA fundraiser where the total is honey in a flask.
• 07.3Upload VesselA file-import dialog where the upload fills a beaker.