Dot Matrix Text React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import DotMatrixText from "./DotMatrixText";

export default function Example() {
  return (
    <DotMatrixText
      text={"STAY\nCURIOUS."}
      color={"#e9b777"}
      offColor={"#ffffff0c"}
      background={"#1b1916"}
      cellSize={7}
      radius={0.33}
      speed={3}
      paused={false}
    />
  );
}

Using Dot Matrix Text

Use short labels or headlines and insert a newline for multiple display rows. The SVG scales down to its container while keeping a single accessible text description.

The built-in alphabet supports Latin letters, numbers and common punctuation. Pass glyphs to add custom characters; unsupported characters use a question mark.

Props

Name	Type	Required	Default	Description
text	string	No	""	Text, with newline support. Latin letters render in uppercase.
color	string	No	"#e9b777"	Lit dot colour.
offColor	string	No	"#ffffff0c"	Unlit dot colour.
background	string	No	"#1b1916"	Display background.
cellSize	number	No	6	Display scale in pixels per cell.
radius	number	No	0.33	Dot radius as a fraction of each cell.
speed	number	No	3	Pulse cycle in seconds.
paused	boolean	No	false	Pause the travelling pulse.
glyphs	Record<string, number[]>	No	undefined	Optional glyph overrides. Each character uses five columns with row flags from 1 through 64.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.