Underwater dive-resort hero with caustics and boids
A shader ocean — god rays from a rippling surface, caustics on the sand, marine snow, bubbles and a schooling shoal — behind an editorial dive-resort page.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: an editorial landing hero for a dive resort, with a live underwater scene in WebGL and a schooling shoal of fish on top. Brand: [RESORT NAME] — [WHAT YOU OFFER IN ONE SENTENCE] Headline: [LINE 1, serif] / [LINE 2, serif italic] Today's conditions (example): [visibility, water temp, current, swell, high tide] Palette: [e.g. deep #03263a to teal to pale aqua #9eeeff, pearl #fff8ee buttons] 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
- ✓God rays marched through the water from a rippling surface
- ✓Animated caustics on sand from layered moving cells
- ✓A boids shoal that streams along a path and dodges the cursor
- ✓Marine snow, rising bubbles and depth fog in one calm scene
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.
