Instrument Rack

Say what a product does with things that are doing it. A features section for a devtools, infrastructure or hardware product where every cell is a live instrument rather than an icon: the counter counts, the needle carries momentum, the lamps say a state in words, and the one knob the visitor can turn (a concurrency limit, on detents) moves the latency needle, so the section answers a touch. The cells are panels of different sizes bolted into one chassis, at concentric radii, with the screws and vents kept sparse. The instruments sleep off screen and hold still under reduced motion.

Copy the instrument-rack 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="instrument-rack/instrument-rack.css">
<div id="instrument-rack"></div>

<script type="module">
  import { mount } from './instrument-rack/instrument-rack.mjs';

  const instrumentRack = mount(document.getElementById('instrument-rack'), {
    label: 'Platform',
    title: 'The rack behind every run.',
    lead: 'Five instruments, mounted where you can see them. The figures are the ones the product runs on.',
  });

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

mount(element, options)

Builds the block inside the element and returns its handle.

handle.setLimit(n)

Move the knob to a limit (1, 2, 4, 8, 16, 32 or 64), as a hand would; fires rk-knob if it changes.

handle.setRegion(id, state)

Set a region's lamp from your status feed: 'ok', 'slow' or 'standby'.

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

Events it fires, which bubble from the element: rk-knob.

1. At rest, on screenThe counter runs on from its start at 12.4 runs a second, the clock counts seconds, the needle rides a slow wander around its reading and the lamps light in turn once (a lamp test).
2. Knob turnedDragging follows the pointer's turn, drawn in by each detent (1, 2, 4, 8, 16, 32, 64); on release it settles in 140 ms. The LCD beside it shows the number, rk-knob fires, and the meter's target moves: 64 puts the needle above 280 ms and lights the amber SLOW lamp.
3. Knob by keyboardThe knob is a role=slider: arrows step a detent, Page keys two, Home and End go to the ends; aria-valuetext says “16 runs at once”.
4. Region set from a feedsetRegion('sin', 'ok') turns a lamp green, 'slow' amber, 'standby' dark; the words beside it change for a screen reader.
5. Off screen or tab hiddenThe loop is cancelled: the needle, the counter and the clock stop, and nothing is drawn until the rack is seen again.
6. Reduced motionNothing moves by itself. The counter and the clock hold their values; the needle sits where the knob puts it and jumps once when the knob changes.
7. Live offThe live option holds the instruments still on purpose; the knob still works.
8. TabletTwo columns: the counter across the top, the knob tall on the left with the lamps and the clock beside it, the meter across the foot.
9. PhoneOne column, the five panels in turn, every instrument scaled by its own panel's width; no sideways scroll.
10. FinishesAluminium and graphite by data-finish; the counter and the LCD are glass and stay the same in both.

Made of: Bento grid container queries, Seven segment svg readout, Spring needle meter, Detent knob slider, Knob drives meter, Lamp test on wake, Raf loop that sleeps off screen, Concentric radii, Lit displays only colour, Finish following.

Original composition. The product (Lode), its figures, regions and copy are invented. The instruments are SVG, DOM and CSS drawn here in the kit's tokens; no canvas, no image. Faces: Instrument Sans and Geist Mono (SIL OFL 1.1), the kit's own.