Light Board

A scrolling dot-matrix LED board with an optional draw/sketch overlay.

When disableDrawing is false, clicking and dragging over the board paints cells using the current draw pen (controlledDrawState). When hover state is active, moving the pointer alone paints without needing to hold the mouse down, and the text scroll pauses while the board is being interacted with.

Options you can pass to customize this component.

Prop
Type
Description
text
string

Text to scroll across the board using the built-in dot-matrix font. Leave empty to use the board purely as a sketchpad.

rows
number

Number of light rows in the board.

lightSize
number

Diameter in pixels of each individual light.

gap
number

Spacing in pixels between lights. Columns are computed automatically from the container width.

font
"default"

Font used to render scrolling text.

updateInterval
number

Milliseconds between each scroll step.

disableDrawing
boolean

Disables click/drag/hover drawing on the board.

colors
{ background?, textDim?, textBright?, drawLine? }

Overrides for the board background and light colors.

controlledDrawState
"0""1""2""3"

The currently selected draw pen. '0' erases; '1'-'3' paint with increasing intensity. Omit to manage internally.

onDrawStateChange
(state: PatternCell) => void

Called when the draw pen should change.

controlledHoverState
boolean

Whether the board is in interactive mode (pauses scroll, enables hover-to-paint). Omit to manage internally from real pointer hover.

onHoverStateChange
(state: boolean) => void

Called when the board's hover/interactive state changes.

npx shadcn add amitgajare2/ariseui/lightboard
Light Board

Arise UI / Display

Light Board

A dot-matrix LED board that scrolls any text across a responsive grid of lights.