Ray-marched cloud flight hero (WebGL)
Glide over a sea of ray-marched volumetric clouds at sunrise, with silver-lit edges, behind a premium airline page and a glass booking widget.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a premium airline landing page flying over live, ray-marched volumetric clouds at sunrise, with an elegant glass booking widget. Airline: [AIRLINE NAME] — [ONE-LINE PROMISE] Headline: [LINE 1] / [LINE 2, in italic] Widget defaults: [FROM] → [TO], [DATES], [TRAVELLERS · CABIN] Technical rules - One file. Plain WebGL: one full-screen triangle and one fragment shader, no libraries or images. Google Fonts allowed (e.g. Newsreader + Manrope + IBM Plex 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
- ✓Volumetric clouds ray-marched in one shader
- ✓Beer–Lambert light with silver-lined edges
- ✓A tileable noise texture generated in code
- ✓A glass booking widget that reflows on phones
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.
