Interactive 3D solar system with real planet facts
Click a planet to fly to it: a shader Sun, eight procedural planets with real Earth coastlines, Saturn's rings and NASA fact cards, clearly marked not to scale.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a landing page for an [ASTRONOMY LEARNING APP] whose hero is an interactive 3D solar system — click any planet to fly to it and read real facts. Brand: [APP NAME] — [WHAT IT DOES IN ONE SENTENCE] Headline: [LINE 1] / [LINE 2, italic gold] Palette: [e.g. space #02030a, gold #ffcf7a, lavender-grey text] Technical rules - One file. Three.js 0.160 via an import map. Fonts: Fraunces (headline), Inter, JetBrains Mono. No images: every surface is a procedural shader (your own hash noise + 5-octave fbm).
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 shader Sun and eight procedural planets lit by it
- ✓Real Earth coastlines decoded from public-domain map data
- ✓A smooth fly-to camera with a planet picker and Esc to return
- ✓Fact cards with verified NASA numbers and a not-to-scale note
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 9, with a step-by-step video walkthrough and AI feedback on your project.
