LED matrix

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<tui-matrix label="Release board" live data-lamp="green"
    text="{ok} DEPLOY OK&#10;p95 214 ms"></tui-matrix>

<tui-matrix label="Tokens per second" mode="spark"
    caption="{v}&#10;tok/s" min="200" max="500"></tui-matrix>

<tui-matrix label="Queue depth" mode="bars" caption="{v}&#10;jobs"
    min="0" max="120" high="80"></tui-matrix>

import '/kit/kit.mjs';   // defines <tui-matrix>

const sign = document.querySelector('tui-matrix[mode="spark"]');
stream.on('batch', (b) => sign.push(b.tokensPerSecond));   // one column a reading
sign.setData(lastHour);                                     // or a whole series

const board = document.querySelector('tui-matrix[live]');
board.text = '{warn} ROLLING BACK api to 4f2a91c';   // too long: it scrolls
pauseKey.onclick = () => board.pause();              // and play()

Needs kit.css and kit.mjs. How to install the kit.

• The dots are one role="img" named with what they say: the message with its icons as words (“OK DEPLOY OK. p95 214 ms”), or for a graph a summary that states the data: “Tokens per second, last 44 readings: now 412 tok/s, lowest 262, highest 468.”
• A name that changes is not announced. With live, a new message (not each scroll step, not each reading) is read politely from a status region beside the image.
• Scrolling holds under the pointer, and pause()/play() are there for a pause key, which a scrolling sign needs beside it.
• Reduced motion: dots switch at once, no frame is ever requested, and a message too long for the width becomes pages of whole words that change every three seconds.
• Graphs keep their number: the caption prints the latest value in the dots, so the shape is never the only signal.
• An aurora drifts on cycles of 12 to 40 seconds and never flashes. It holds still off screen and in a hidden tab, pause() holds it as it holds a scroll, and under reduced motion it is one still frame. Its colours carry no meaning, so a state keeps its own lamp beside the sign.

One custom element around a canvas, because it is a thousand lights. The unlit dots (a faint die in each lens, seen through the smoke) are drawn once into a base image; the lit dot is one sprite, a warm-white core in the LED colour inside a bloom three pitches wide, baked once per size and colour. A frame is the base and one additive blit per lit dot, so where dots sit together their blooms add up the way light does in acrylic. Every dot has a light level that runs toward its target, 24 ms up and 80 ms down, so a changing message warms in and fades out rather than switching; while text scrolls the times are 8 and 16 ms, so a moving letter leaves a trace of persistence, not a smear. When every dot has arrived the loop stops. The face is 5×7 with an eighth row for descenders, drawn for this display, figures all five wide; icons are seven square. The acrylic’s sheen is a fixed layer above the canvas, lit from above left. An aurora is the kit’s shared field (aurora.mjs): three to five soft blobs, seeded, drifting on slow cycles. Each frame the field is sampled once a dot into a canvas one pixel a dot, each colour taken to full brightness, since a lit LED is lit whatever its hue. The lit dots are drawn white, the field is laid over them source-in, the hot core goes back on top, and the whole is added to the dark dies, which stay neutral. It runs only while the sign is on screen, at 30 frames a second at most.