Glowing LED dot-matrix board hero (WebGL)
A big LED wall spells out the headline in glowing round dots, scrolls a metrics ticker and draws a live chart — above glass KPI cards with sparklines.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a dark, premium landing page for a [REAL-TIME ANALYTICS PRODUCT] whose hero is a large LED dot-matrix board. Brand: [PRODUCT NAME] — [WHAT IT DOES IN ONE SENTENCE] Board headline: [LINE 1, white] / [LINE 2, cyan → blue], e.g. "Every metric, / in real time." Ticker items: [5–7 EXAMPLE METRICS with value and change], e.g. "MRR $482.1K ^3.2%", ending with "EXAMPLE DATA" Palette: cyan #5ce1ff, blue #7b8cff, good #4ade80, bad #ff5c7a, amber #ffb547 on #03050a Technical rules
The full prompt comes with the course
All 55 prompts in the library are part of the Vibewrights course. Enrollment opens in January 2027 — join the waitlist to get the founding-member price.
See what's includedWhat you'll get
- ✓A WebGL shader that turns a tiny bitmap into round, glowing LEDs
- ✓A hand-made 5×7 dot font for the ticker, clock and labels
- ✓A boot wipe, shimmer, per-LED flicker and a live LED chart
- ✓Glass KPI cards with sliding sparklines and easing counters
How to use it
- 1Replace everything in [BRACKETS] with your own product, copy and colors.
- 2Paste it into Claude Code, Cursor, Lovable or Bolt and open the page in Chrome.
- 3Compare with the live demo, then tune one thing at a time.
— From the course
You'll build this end-to-end in Module 9, with a step-by-step video walkthrough and AI feedback on your project.
