Dot Matrix

Text on an LED panel: a 5×7 bitmap font drawn on a canvas of faint unlit dots, with lit dots in bone.

$149 once · every Pro piece

Customize

Text

Dot (px)

Gap (px)

Scroll

Speed (columns/s)

Cycle words

When the text changes, only the dots that differ switch, column by column, each with a short hot flash; scroll mode marquees long text one whole column at a time. Lit dots near the pointer warm toward the accent and cool behind it.

Install

npx shadcn@latest add @obsyde/dot-matrix

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { DotMatrix } from '@/components/obsyde/ember/dot-matrix/DotMatrix';

export function Example() {
  return (
    <DotMatrix text="DOT MATRIX" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/dot-matrix/DotMatrix.tsxcomponent
ember/dot-matrix/dot-matrix-demo.cssstyles
ember/dot-matrix/dot-matrix.cssstyles
ember/dot-matrix/DotMatrixDemo.tsxdemo
ember/effects-kit/kit.tsshared
ember/shared/accent.tsshared
ember/shared/spring.tsshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`text`Text	`string`	`'DOT MATRIX'`
`dot`Dot (px)	`number`	`4`
`gap`Gap (px)	`number`	`2`
`scroll`Scroll	`boolean`	`false`
`speed`Speed (columns/s)	`number`	`14`
`cycle`Cycle words	`boolean`	`false`