Interactive dotted globe with live routes
A drag-to-spin globe made of thousands of glowing dots, with animated routes between cities and a live routing card.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a dark hero for a [PRODUCT TYPE, e.g. edge network] with a large interactive 3D globe made of dots, and animated routes between cities. Use Three.js. Brand: [PRODUCT NAME] — [WHAT IT DOES IN ONE SENTENCE] Headline: [LINE 1] / [LINE 2 with a gradient fill] Cities: [8–12 CITIES WITH LATITUDE/LONGITUDE, e.g. Tokyo 35.68, 139.69; London 51.50, -0.13; Lagos 6.52, 3.38 …] Palette: [e.g. near-black #03040b, teal #5eead4, violet #a78bfa] 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 real world map turned into a dot globe at load time
- ✓Animated arcs between cities, with pulses where they land
- ✓Drag-to-spin with inertia and a soft atmosphere
- ✓A live card that names the route being drawn
How to use it
- 1Replace everything in [BRACKETS] with your own product and cities.
- 2Paste it into Claude Code, Cursor, Lovable or Bolt and open the page in Chrome.
- 3Drag the globe. If any land looks striped, ask the AI to fix the 180° meridian wrap.
— 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.
