LED Dot-Matrix Board

About this style

Dot-matrix signs build every character from a fixed grid of lamps or LEDs, most often in a 5×7 cell. LED boards spread through bus destination signs, station platforms, trading floors, shop windows and venue marquees, where text scrolls and wipes one column at a time. Their round dots, the faint grid of unlit LEDs and motion in whole steps give them a look a smooth screen doesn't have. Designers now borrow it for retro interfaces, album art and transit-themed branding.

Make a 10-second amber LED dot-matrix sign running its messages.

<inputs>
Venue: Copperline Hall. Messages, two lines each: COPPERLINE / HALL, then TONIGHT / LIVE, then the act, SALT & / SIGNAL. Ticker: WELCOME TO COPPERLINE HALL · DOORS 7:30 SHOW 8:00. Duration: 10s. If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Board: 128 × 62 LEDs on an 11.5px pitch (a 1472×713 active area), centered in a matte black housing (#151413, 56px border, four corner screws, a 1px highlight along the top edge) on a dark wall #0B0A09. Under it, a screen-printed label in "Share Tech Mono" 400, 22px, #6B5636, tracked 0.2em: COPPERLINE HALL · BOARD 2.
LEDs: 7px round dots. Lit: core #FFC24A shading to #FF8C00 at the rim, plus a pre-rendered glow sprite (14px radius, additive, 35%). Unlit: #2A1906 at 70% with a 1px highlight at the top-left, so the whole grid always shows. Brightness is quantized to 8 levels. The lit area spills a broad amber wash onto the housing lip and wall (up to 10%, in proportion to the lit count).
Font: a 5×7 bitmap font defined in code (A–Z, 0–9, &, ·, :, space), one blank column between characters, used at 1× (6-column advance), 2× (each font pixel a 2×2 block, 12-column advance) and 3× (3×3 blocks, 18-column advance). No anti-aliasing: an LED is on or off.
Layout in LED rows: line 1 is rows 3–23 and line 2 rows 27–47 (a 3× line fills its 21 rows; a 2× line sits centered in them); a dotted divider on row 51 (every other LED); the 1× ticker on rows 53–59. Lines center on whole columns.
Motion is digital: everything moves in whole-LED steps, never sub-pixel. Column drop: each column of the new text falls into its line row by row, 16ms per row, columns starting 14ms apart left to right. Wipe: a lit cursor column sweeps left to right at 160 columns/s, erasing and writing behind it. Sparkle dissolve: old LEDs off and new ones on in a seeded random order over 0.6s, each LED switching once. Scroll: the ticker moves left at a constant 44 columns/s (offset = floor(elapsed × 44)), its start solved so it stops dead at 8.0s with DOORS 7:30 SHOW 8:00 centered.
The real thing has a visible grid of round dots, a glow per dot and motion in whole steps; the cheap version is a pixel font under a blur filter, gliding smoothly.
Banned: smooth sub-pixel motion, anti-aliased type, any color but amber, scanline overlays, chromatic aberration, whole-board blinking, anything flashing more than 3 times per second.
</direction>

<structure>
0.0–0.6s: the board dark, the unlit grid and the label visible.
0.6–1.0s: the divider row lights from the center outward in whole-LED steps.
1.0–1.9s: COPPERLINE (2×) column-drops into line 1, then HALL (3×) into line 2, 0.2s later; the ticker starts entering from the right at its solved start (about 1.2s).
1.9–3.4s: hold while the ticker runs.
3.4–4.2s: wipe to TONIGHT (3×) and LIVE (3×).
4.2–5.2s: hold.
5.2–5.8s: sparkle dissolve to SALT & (3×) and SIGNAL (3×).
5.8–8.0s: the act holds; the ticker runs on and stops dead at 8.0s, centered.
8.0–10.0s: hold, every LED steady.
For other durations, scale the holds, not the per-column speeds, and keep the ticker's stop 2s before the end.
</structure>

<build>
One self-contained index.html, CSS and JS inline. Google Fonts via <link> are fine; no other libraries (no three.js: this style is flat). Draw in Canvas 2D, repainting every frame from scratch. Canvas won't fetch fonts itself: await document.fonts.load() for each face, then define window.seek. Pre-render the LED sprites (8 lit levels and unlit) and the housing once at load; each frame computes the 128×62 on/off grid from t and blits sprites. The stage is 1920×1080 (16:9), scaled to fit the window. Design for 60fps. window.seek(t), t in seconds, must compute every visual from t alone: no CSS transitions or animations, no setTimeout or setInterval, no state carried between frames, and randomness only from a seeded PRNG. Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
</build>

<check>
Before showing me, step through one frame per second: screenshot each and look at it. Fix overlaps, clipped or cramped text, accidental edge collisions, and anything off-style or Banned. Check every LED sits on the grid and changes in whole steps, unlit dots show everywhere, every line is centered on whole columns, and the ticker stops exactly centered at 8.0s. Confirm seek(duration) and seek(duration + 1) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Cut-Paper Title Sequence

Made by us

A jazz-tempo film title sequence in flat vermilion, mustard, bone and black: hand-cut paper shards jab in on the beat,…

Split-Flap Departure Board

Made by us

A mechanical station departure board where every flap steps through its drum to land on times, destinations and statuse…

Swiss Grid Typography

Made by us

A Swiss-style event poster that builds itself on a visible 12-column grid: grotesque type rises out of baseline masks,…