Dot Matrix Text
LED dot-matrix display rendered as 5x7 character bitmaps with optional glow and horizontal scroll, for React, Next.js, and Tailwind CSS.
Dot Matrix Text preview
A retro LED dot-matrix readout for the web. Each character is rendered from a hand-tuned 5×7 bitmap font — the same grid you'd find on a vintage stadium scoreboard, an arcade marquee, or a smart-home status panel. Lit dots glow with a configurable color and an optional blur halo; unlit dots sit at low opacity to show the underlying matrix grid. Includes an optional scroll mode that translates the entire glyph track horizontally — perfect for headlines, news tickers, and "NOW LOADING" banners. Lowercase input is automatically uppercased because the bitmap only includes capitals, just like a real seven-segment-class display. Renders pure DOM divs (no canvas, no SVG), so it scales cleanly with dotSize and gap, picks up your foreground color via CSS, and stays readable in both light and dark themes.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the dot-matrix-text text effect into my projectRelated Components
LCD Text
Seven-segment LCD display with flicker and CRT scanlines
Glitch Text
Cyberpunk RGB separation with clip-path slicing
Decrypted Text
Matrix-style decryption with character cycling
Text Pressure
Variable-font weight that responds to cursor proximity
Neon Text
Neon-sign glow and flicker for headline copy
Typing Text
Realistic typewriter effects with cursor blinking
FAQ
Was this page helpful?
Sign in to leave feedback.