Dot matrix
An LED sign, the kind over a train platform. Every dot glows in fast and fades out slow. Long text scrolls through a dot at a time and rests at its start each time round. New text dissolves, sweeps, pushes, or drops in, with the columns that changed falling under gravity and bouncing once as they land.
Installation
npx @neelshha/ui@latest add dot-matrixUsage
import { DotMatrix } from "@/components/ui/dot-matrix";
<DotMatrix
value="19:42 Porto"
columns={64}
align="start"
effect="drop"
/>The text is on the page for screen readers and for copying. The dots sit beside it, hidden from assistive tech, and the server draws them already lit, so the sign reads before any script runs. A change relights only the dots that differ.
Effects
Four ways for new text to take over. Dissolve flips the dots that differ in a random order, wipe sweeps across, push slides the old text out, and drop lets the changed columns fall.
<DotMatrix value={city} columns={36} effect="dissolve" />
<DotMatrix value={city} columns={36} effect="wipe" />
<DotMatrix value={city} columns={36} effect="push" />
<DotMatrix value={city} columns={36} effect="drop" />A clock
Digits all share one width, so the time holds still. With drop, only the digits that changed fall in.
<DotMatrix value={time} columns={41} effect="drop" />Type into it
With align start, a new letter drops in at the end and the rest stay put. Past the columns, the text starts to scroll. Point at it to hold it still.
<DotMatrix value={text} columns={48} align="start" effect="drop" />Tones
Sky, amber, success, and error. The dark dots take a little of the colour too.
<DotMatrix value="✓ PAID" />
<DotMatrix value="EXIT →" tone="amber" />
<DotMatrix value="ALL CLEAR" tone="success" />
<DotMatrix value="ON AIR" tone="error" />Your own glyphs
Draw a character as seven rows of # and ., top row first. It sets like any other letter.
const PLANE = "...#.../...##../#..###./#######/#..###./...##../...#...";
<DotMatrix value="✈ LIS 19:42" glyphs={{ "✈": PLANE }} tone="amber" />API
Other props go to the outer span. A change runs for one --duration-spring with dissolve and wipe, one and a half with push, and a little over two with drop. With reduced motion, new text appears at once, and long text shows a page at a time instead of scrolling.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | The text: letters, digits, punctuation, and ° • ← → ↑ ↓ ♥ ✓ ✕ ▶ € £. Accents drop off, and a character it can't draw leaves a gap. | |
columns | number | Width in dots. Text that fits sits where align puts it. Longer text scrolls through and comes round again. Leave it out and the sign is as wide as the text. | |
align | "start" | "center" | "end" | "center" | Where text that fits sits. |
effect | "dissolve" | "wipe" | "push" | "drop" | "dissolve" | How a new value takes over: the dots that differ flip at random, a front sweeps across, the new text pushes the old out, or the columns that changed fall in and bounce. |
speed | number | 20 | How fast long text scrolls, in dots a second. |
paused | boolean | false | Holds long text still. It also holds while the pointer is on it and while it is off screen. |
tone | "sky" | "amber" | "success" | "error" | "sky" | The colour of the LEDs. |
glyphs | Record<string, string> | Characters of your own, or new shapes for built-in ones: seven rows of # and . joined by /, top row first. | |
--ns-matrix-on | color | #8ec2ff | A lit dot. The tone sets it. |
--ns-matrix-glow | color | rgb(84 150 255 / 60%) | The light around a lit dot. |
--ns-matrix-off | color | A dark dot, a tenth of the way to lit, so the panel shows as on a real sign. | |
--ns-matrix-dot | length | 0.25em | The size of a dot. The whole sign scales with font-size. |
--ns-matrix-gap | length | 0.09em | The space between dots. |