# Instrument Rack

A bento grid of feature cells made as a rack of machined panels. Each holds a small working instrument: a segmented counter, a needle meter with weight, a row of region lamps, a detent knob you turn, an LCD clock.

Block · With a Pass · https://tactileui.dev/blocks/instrument-rack

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

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

## Usage notes

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.

## Options

| Option | Type | Description |
| - | - | - |
| label | text | Label |
| title | text | Headline |
| lead | text | Lead |
| runs | number | Where the segmented readout begins counting. |
| limit | enum | Where the knob is set. The latency needle sits higher as it goes up. |
| live | boolean | Off: the counter, the clock and the needle hold still. Always off under reduced motion. |
| frame | boolean | The screws, the vent slots and the engraved plate along the rack’s top edge. |
| finish | enum | Auto follows the page’s data-finish, then the visitor’s system. |

## Methods

- setLimit
- setRegion
- update
- destroy

## States

1. **At rest, on screen**: 
2. **Knob turned**: The LCD beside it shows the number, rk-knob fires, and the meter's target moves.
3. **Knob by keyboard**: The knob is a role=slider.
4. **Region set from a feed**: setRegion('sin', 'ok') turns a lamp green, 'slow' amber, 'standby' dark; the words beside it change for a screen reader.
5. **Off screen or tab hidden**: The loop is cancelled: the needle, the counter and the clock stop, and nothing is drawn until the rack is seen again.
6. **Reduced motion**: Nothing 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 off**: The live option holds the instruments still on purpose; the knob still works.
8. **Tablet**: Two 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. **Phone**: One column, the five panels in turn, every instrument scaled by its own panel's width; no sideways scroll.
10. **Finishes**: Aluminium and graphite by data-finish; the counter and the LCD are glass and stay the same in both.

## How it works

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.