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.
What it is for
Say what a product does with things that are doing it.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- 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
- Stack
- Vanilla ES modules, CSS, SVG
- Needs
- Nothing, no dependencies
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- 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).
- 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.
- 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”.
- Region set from a feedsetRegion('sin', 'ok') turns a lamp green, 'slow' amber, 'standby' dark; the words beside it change for a screen reader.
- 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.
- 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.
- Live offThe live option holds the instruments still on purpose; the knob still works.
- 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.
- PhoneOne column, the five panels in turn, every instrument scaled by its own panel's width; no sideways scroll.
- FinishesAluminium and graphite by data-finish; the counter and the LCD are glass and stay the same in both.
Notes
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.
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.
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
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.