Ray-traced black hole hero (WebGL)
An Interstellar-style black hole — a glowing disk bent by gravity around a dark shadow — rendered live behind a GPU-cloud landing page.
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. GPU cloud] with a live, ray-traced black hole behind it. Brand: [PRODUCT NAME] — [WHAT IT DOES IN ONE SENTENCE] Headline: [LINE 1, light] / [LINE 2, bold] Accent: [e.g. warm gold #ffc98a on near-black #030204] Technical rules - One file. Plain WebGL — no libraries. One full-screen triangle and one fragment shader. Google Fonts allowed (e.g. Space Grotesk + IBM Plex Mono). - Write your own small noise (sin-hash value noise + 4-octave fbm). No textures or images.
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 real gravitational-lensing ray tracer in one fragment shader
- ✓An accretion disk with Doppler beaming and Kepler spin
- ✓A lensed starfield and a camera that follows the mouse
- ✓Rendered below screen resolution so laptops stay smooth
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.
