LED matrixPro

A dot matrix display for text and numbers: static, scrolling, or updating only the dots that change.

On this page

ProLive throughput where only changed dots fade, elapsed time and a scrolling status line.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/led-matrix

tsx

import { LedMatrix } from "@/components/ui/chatcn/pro/led-matrix"

<LedMatrix value={tokensPerSecond} length={3} size="hero" />

Numbers keep fixed digit widths and pad to the end of length, so a changing stat never jumps. Strings draw narrow glyphs at their own width.

ProEvery size, square pixels, tones, padding, cut values and empty.

Prop	Type	Notes
`value`	`string \| number`	What to show
`length`	`number`	Width in characters. Shorter values pad, longer ones cut or scroll
`align`	`"start" \| "center" \| "end"`	Default `start`, `end` for numbers
`scroll`	`boolean`	Marches values longer than `length` through the window
`speed`	`number`	Scroll speed in columns per second. Default 16
`size`	`"badge" \| "sm" \| "md" \| "lg" \| "hero" \| number`	14, 21, 28, 42 or 70 px tall, or a dot pitch in px
`shape`	`"round" \| "square"`	Default `round`
`transition`	`boolean`	Fade changed dots. Default true
`proportional`	`boolean`	Default true for strings, false for numbers
`live`	`boolean`	Announce changes politely
`paused`	`boolean`	Stops the scroll

Not interactive.

The real text sits in a visually hidden span next to the dots, which are aria-hidden. With live, that span is a polite live region.
Lit dots are currentColor and unlit dots the same color at 12%, a low step that follows any tone; status hues come from text classes and should sit next to a word, such as PASS or FAIL.
Under forced-colors lit dots draw in CanvasText and unlit dots in GrayText.

A new value changes only the dots that differ: they switch on in 90 ms and fade off in 240 ms, like phosphor. Unchanged dots do not move at all, so the change is easy to spot.
Scrolling moves one dot column per step. Under reduced motion a long value shows in full, at rest; the opacity fades stay.
SVG with one element per dot and a pattern for the unlit grid; keep static displays under about 2,000 dots.