Rotating starfield with hover-traced constellations
A deep night sky with realistic star brightness and colour slowly turns over a hilltop observatory; hover anywhere to trace a glowing star figure.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a night-sky landing page for a [PRODUCT TYPE, e.g. stargazing app] with a deep, slowly turning starfield where hovering traces a glowing constellation figure. Brand: [BRAND NAME] — [WHAT IT DOES IN ONE SENTENCE] Headline: [LINE 1, light] / [LINE 2, bold gradient] Palette: [e.g. near-black blue #03050c, ice blue #9fd0ff, warm gold #ffd9a0] Technical rules - One file. Plain WebGL (two contexts), one 2D canvas and an SVG overlay. No libraries. Google Fonts allowed (e.g. Sora + DM Mono).
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
- ✓Thousands of GPU stars with a real magnitude and colour spread
- ✓A half-resolution Milky Way shader with dust lanes
- ✓Hover figures built from a minimum spanning tree
- ✓SVG line-draw animation that turns with the sky
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.
