Guided breathing orb (light WebGL hero)
A calm, pastel meditation-app hero: a glowing orb grows, shimmers and shrinks to guide 4-7-8, box or even breathing, with a live progress ring.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a light, calm landing hero for a [APP TYPE, e.g. meditation app] with a live breathing orb that guides the visitor through a breathing exercise. Brand: [APP NAME] — [WHAT IT DOES IN ONE SENTENCE] Headline: [LINE 1, light serif] / [LINE 2, italic serif with a plum-to-rose gradient] Palette: [e.g. paper #f5f1ef, ink #1d1b2c, pastels peach, rose, lavender, sky, mint] Technical rules - One file. Plain WebGL, no libraries. Google Fonts allowed (e.g. Newsreader + DM Sans + DM 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 soft, glowing pastel orb drawn in one fragment shader
- ✓A breathing state machine that drives size, shimmer and colour
- ✓An SVG progress ring split into the pattern's phases
- ✓Pattern picker, pause button and still-water ripples
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 2, with a step-by-step video walkthrough and AI feedback on your project.
