Liquid chrome hero with a morphing 3D blob
A mirror-chrome blob that ripples like liquid and reacts to your mouse, in front of a giant wordmark on a light, airy page.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a light, premium hero where a liquid-chrome blob floats in front of a giant wordmark. The blob is live 3D made with Three.js. Brand: [PRODUCT NAME] — [WHAT IT DOES IN ONE SENTENCE] Wordmark behind the blob: [ONE SHORT WORD, usually the brand name] Headline: [LINE 1] / [LINE 2 in an italic serif] Accent gradient: [e.g. violet #6d28d9 → pink #db2777 → teal #0891b2] 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 physically based chrome material with iridescence
- ✓A studio lighting environment built in code, no HDR files
- ✓Smooth vertex morphing with correct reflections
- ✓Glass feature chips, contact shadow and a mobile layout
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.
- 3Move your mouse quickly over the blob — it should ripple harder, then settle.
— 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.
