24,000 particles that morph between shapes
A wordmark made of particles that flies apart into a sphere, a knot and a galaxy. Click to morph, move the cursor to push them.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a dark hero for [BRAND] where ~24,000 glowing particles spell the brand name, then morph into other shapes. Brand: [NAME] — [WHAT IT DOES IN ONE SENTENCE] Headline: [LINE 1] / [LINE 2 with a violet → cyan → pink gradient] Technical rules - One file. Three.js 0.160.0 as an ES module through an import map from cdn.jsdelivr.net. Google Fonts allowed (e.g. Syne + Inter + JetBrains Mono). - 24,000 particles on desktop, 12,000 on phones. A seeded random so shapes are the same every load.
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
- ✓Particles sampled from text, a sphere, a knot and a galaxy
- ✓Smooth, staggered morphs with mid-flight turbulence
- ✓Cursor repulsion done in the vertex shader
- ✓Shape chips, click-to-morph and auto-play
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.
