Magnetic field particle hero (Canvas 2D)
Thousands of glowing particles ride the field lines between a charger and a car, and your cursor becomes a third pole that bends the whole field.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a dark landing hero for an [EV CHARGING NETWORK] where glowing particles flow along magnetic field lines between two poles, and the visitor's cursor becomes a third pole that bends the field. Brand: [BRAND NAME] — [WHAT IT DOES IN ONE SENTENCE] Headline: [LINE 1, light] / [LINE 2, bold gradient] Pole labels: [SOURCE, e.g. Charger] → [SINK, e.g. Your car] Palette: [e.g. electric cyan #2ee6ff → lime #c2ff3d on near-black #03070b] 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 2D field from point poles, traced with RK2 steps
- ✓2,200 particles with fading trails, batched for speed
- ✓The cursor as a third pole that pulls or pushes
- ✓Cheap bloom: a quarter-size copy blurred by CSS
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.
