Skip to the object
TACTILE UI

Colophon

A footer made as the rating plate and the index of a product. An engraved plate with the model, the serial and the specification, a contents-page index with leader dots, a five-detent rotary switch for language and region, a service lamp and a top key.

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

Datasheet

Mechanism
Engraved rating plate, Generated serial bars, Manual index with leaders, Native radio rotary switch, Detent snap by pointer angle, Region swaps legal entity, Status lamp with words, Back to top key, Container query layout, Finish following
Stack
Vanilla ES modules, CSS, SVG
Needs
Nothing — no dependencies
States
10 documented
Version
0.1.0
Licence
With a Pass

States

  1. At restThe engraved plate with its four screws and serial bars; the index in two columns of four numbered sections; the switch at the configured region; a green service lamp; nothing runs.
  2. Switch turnedAn arrow key, Home or End, a legend or a drag turns the knob to the next detent in 260 ms with a small overshoot; the readout names the region, the legal line swaps its entity, and clo-region fires with { region, lang, name }.
  3. Switch draggedA pointer or finger on the dial snaps the knob to the nearest detent as it moves; the gap at the bottom belongs to its nearer end.
  4. Service degradedThe lamp turns amber and the words read “Service degraded”; the line is role=status, so the change is announced. Outage is red.
  5. Service offThe lamp and its words are left out.
  6. Link hoverThe title underlines and the leader dots darken.
  7. Key pressedBack to top drops its 2px skirt, scrolls to the top (smoothly unless reduced motion is asked for) and fires clo-top.
  8. TabletThe plate above, its two halves side by side; the index below in two columns; the key on its own row.
  9. PhoneOne column; index rows are 36px targets; the switch and its readout, the lamp and the legal line stack; the key fills the width.
  10. Reduced motionThe knob and the key move without transitions; everything else is unchanged.

What it is for

The footer of a product that wants to read as an object with a manual: developer tools, infrastructure, hardware-adjacent software. Where the Machined Footer is the bottom panel of a device, this is the plate riveted to its back and the contents page of its manual. It carries what a footer carries (every link, the legal line, a way back to the top) and what these products want there: the model, serial and rated specification cut into metal, the region chosen on a rotary switch that swaps the legal entity and fires clo-region for your routing, and a service lamp with its words. CSS and a little DOM, no dependency, both finishes.

Original composition. The product (Marlow Queue, MQ-40), its specification, serial, links and page numbers are invented. The plate, bars, dial and knob are CSS and SVG drawn here, in the kit's tokens; no image. Faces: Instrument Sans and Geist Mono (SIL OFL 1.1), the kit's own.