Liquid voice orb that listens, thinks and speaks (WebGL)
A glowing liquid orb for a voice assistant: it ripples while listening, swirls while thinking and pulses while speaking, with live captions and an opt-in mic.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a dark landing hero for a voice assistant, with a live liquid orb that reacts to speech. Brand: [PRODUCT NAME] — [WHAT IT DOES BY VOICE, ONE SENTENCE] Headline: [LINE 1, sans] / [LINE 2, italic serif with a gradient] Palette: [e.g. cyan #7fe9ff, violet #9d8bff, pink #f59ad8 on ink #050509] Example conversation: [3 short exchanges: what the user says / what it is doing / what it answers] 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
- ✓A ray-marched liquid sphere with noise-displaced surface
- ✓Three voice states blended smoothly by one amplitude value
- ✓Word-by-word captions synced to a speech-like envelope
- ✓Real microphone input only after the user clicks and agrees
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.
