Code-rain headline that assembles itself (Canvas 2D)
A rain of hex glyphs that locks into place to spell the headline, then glitches, behind a security landing page with a live example scan card.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a dark landing hero for a [PRODUCT TYPE, e.g. security platform] where a rain of hex glyphs falls, locks into place and assembles the headline. Brand: [PRODUCT NAME] — [WHAT IT DOES IN ONE SENTENCE] Headline: [2 SHORT LINES, e.g. "Find it" / "first."] Palette: [e.g. teal #2dd4b4 rain, acid green #c6ff3d headline and CTA, on #020706] 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 glyph rain that locks into a hidden text mask and spells the headline
- ✓A coverage-sampled letter mask so the words read even in big cells
- ✓Scramble waves, glow and a scan beam drawn from a sprite atlas
- ✓A live scan card with example findings and text that stays readable
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 3, with a step-by-step video walkthrough and AI feedback on your project.
