Rainy window at night shader for a music brand
Look through a rainy window at a neon city: real-time raindrops that slide, refract the bokeh behind them and wipe the fog, behind a moody record-label page.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a dark landing page for [BRAND, e.g. an independent record label] seen through a rainy window at night, rendered live in one fragment shader. Brand: [NAME] — [ONE-LINE DESCRIPTION] Headline: [LINE 1] / [LINE 2, italic] Palette: [e.g. near-black #07050c, neon pink #ff8fc4, amber #ffc58f] Technical rules - One file. Plain WebGL, one full-screen triangle, one fragment shader. No libraries, no images. Google Fonts allowed (e.g. Bodoni Moda + Instrument Sans + JetBrains Mono).
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 procedural neon city made of out-of-focus bokeh lights
- ✓Raindrops that act as tiny lenses and slide in stick-slip jumps
- ✓Fog that drops and trails clear, and the cursor can wipe
- ✓A glass Now Playing card with a moving waveform
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.
