Light-through-a-prism hero with real optics (WebGL)
A white beam hits a glass prism and fans into a spectrum you steer with your cursor — Snell's law, dispersion and dust in the beam, behind an AI-observability 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. AI observability platform] where a live prism splits a white beam into a spectrum that follows the cursor. Brand: [PRODUCT NAME] — [WHAT IT DOES IN ONE SENTENCE] Headline: [LINE 1, light] / [LINE 2, medium weight] Five signals in the spectrum: [NAME + EXAMPLE VALUE x5, e.g. Latency 412 ms, Cost $0.0031, Tokens 1,284, Retrieval 6 docs, Eval score 0.94] 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
- ✓Snell's law and Cauchy dispersion traced for 32 wavelengths
- ✓A glowing beam, glass rim and spectrum in one fragment shader
- ✓SVG annotations that share the shader's coordinates
- ✓A live optics readout, including total internal reflection
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 7, with a step-by-step video walkthrough and AI feedback on your project.
