Thunderstorm weather hero with liquid-glass cards
A live WebGL thunderstorm — rolling clouds lit from inside by branching lightning, slanted rain, a city skyline — under a liquid-glass forecast dashboard.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a premium weather-app landing hero with a live WebGL thunderstorm behind a liquid-glass forecast dashboard. Brand: [APP NAME] — [WHAT IT DOES IN ONE SENTENCE] Headline: [LINE 1, sans] / [LINE 2, italic serif] Example data: [CITY, current temp + condition, 9 hours, 7 days] Palette: [e.g. storm navy #05070d, violet-white lightning, amber #ffd27a, rain blue #8ec5ff] 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
- ✓Storm clouds from domain-warped, bump-lit billow noise
- ✓Branching lightning that lights the clouds from inside
- ✓Slanted rain and a city skyline that react to every flash
- ✓Liquid-glass cards: now, hourly, 7-day and a radar map
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 2, with a step-by-step video walkthrough and AI feedback on your project.
