Skip to the object
TACTILE UI

Specimen Case

A 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. Light comes from above: hover, focus or press Light and that case wakes; the others sleep.

Built with Odometer, Flip-Dot, Detent Dial, Vessel

Everything you set here is what the Code and Prompt tabs give you.

Datasheet

Mechanism
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
Stack
Vanilla ES modules, CSS, Container queries
Needs
Odometer, Flip-Dot, Detent Dial, Vessel
States
11 documented
Version
0.1.0
Licence
With a Pass

States

  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).

What it is for

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.

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.