# LED matrix

A dot-matrix display of round LEDs behind smoked acrylic, each with its own bloom and a short warm-up and fade.

Kit part · With the Kit · https://tactileui.dev/parts/matrix

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

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. When every dot has arrived the loop stops. 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.

## Variants

- Failed · red, two lines
- Sparkline · GPU temperature, a limit
- Bars · queue depth by minute
- Marquee
- Sized to its box
- Aurora · borealis, an assistant listening
- Aurora · ember, tokens per second
- Aurora · prism, the full spectrum
- Aurora · your own colours
- Aurora · mono, shades of one brand colour

## States

- Text
- Sparkline
- Bars
- Blank

## Props and options

| Name | Kind | Description |
| - | - | - |
| cols · rows | attribute | The dots that carry the message. |
| pitch | attribute |  |
| text | attribute · property | The message. Two lines on 16 rows; wider than the display, it scrolls. |
| align · scroll · speed | attribute | Where a static line sits (left, centre, right); scroll it anyway; columns a second. |
| mode | attribute | What the dots show: the text, or the series as a sparkline or bars, newest at the right. |
| values · min · max · high | attribute | The series from markup, its range (0 to the largest by default), and a limit drawn as a dotted row. |
| caption · precision · unit | attribute |  |
| bar | attribute | Bars: columns per bar (one dark column between). |
| label · live | attribute | The display’s name; live announces a new message politely (text mode only). |
| data-lamp | attribute | The LEDs’ colour: green done, amber working, red failed, blue linked or for information, white standing by. Aurora is the one light of more than one colour, for a sign whose work is thinking, listening or making. |
| aurora · aurora-seed · aurora-speed | attribute |  |
| Pointer over it | pointer | A scrolling message holds still while the pointer is on it. |

## Usage notes

Switch what the sign shows: a status, a rollback that scrolls (pause it, or hover it), tokens per second and queue depth arriving live. Each dot warms up and fades; nothing jumps.

## Accessibility

- A name that changes is not announced.
- 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.
- Its colours carry no meaning, so a state keeps its own lamp beside the sign.

## Related parts

- [VFD](https://tactileui.dev/parts/vfd): A vacuum-fluorescent display: cyan-white light on near-black glass, with a glow and a ghost. Frequencies, levels, status screens.
- [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
- [Glass](https://tactileui.dev/parts/glass): Dark display glass for plots and live readouts, whatever the finish around it. Everything printed inside it is lit.