Dot Matrix Display

Dot Matrix Display

About Dot Matrix Display

Why you’ll love it

  • True pixel look: crisp squares (or rounded dots)

  • Full Framer controls: tweak text, speed, columns and colors live in the canvas.

  • Marquee-ready: looped scrolling animation while hover or always running

  • Small, self-contained, zero-deps canvas renderer: fast for prototypes and production.

Key features

  • Pixel-perfect dot-matrix glyphs (A–Z, 0–9, hyphen, space) built-in.

  • Configurable columns, cell width & height, horizontal & vertical gaps.

  • Grid/background color + foreground (text) color.

  • Adjustable animation speed (ms).

  • Efficient render loop using requestAnimationFrame.

  • Framer property controls for live editing in the Canvas.

  • Lightweight: no external dependencies.