Isometric smart city with day-to-night (Three.js)
An isometric 3D city twin: buildings rise in, cars stop at red lights, a toggle turns day into night, and hovering a building shows its stats.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a light landing hero for a [PRODUCT TYPE, e.g. AI urban-planning platform] with a live isometric city that rises in, has moving traffic and switches from day to night. Brand: [PRODUCT NAME] - [WHAT IT DOES IN ONE SENTENCE] Headline: [LINE 1] / [LINE 2, violet-to-teal gradient] Palette: [day: lavender #e9ecff -> peach #fdeee4, ink #191c33; night: navy #0b0f2a -> #1d1840; accents #5b4ff5 and #1597a6] 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
- ✓An isometric city of instanced buildings with shader windows
- ✓Traffic that stops at red lights and keeps its distance
- ✓A smooth day-to-night switch with glowing windows and lamps
- ✓Hover-to-inspect cards with a leader line and example stats
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.
