Cinematic planet-sunrise hero (Three.js)
A giant planet low in the frame, a sun rising over its glowing horizon, satellites on orbit trails and a starfield — all live 3D.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a cinematic, full-screen hero where a giant planet sits low in the frame and the sun is rising over its horizon. The 3D scene is live WebGL made with Three.js. Brand: [PRODUCT NAME] — [WHAT IT DOES IN ONE SENTENCE] Headline: [LINE 1, light weight] / [LINE 2, bold] Palette: [e.g. deep space #020108, violet #a78bfa, cyan #67e8f9] 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 live Three.js scene with custom GLSL shaders, no image files
- ✓A sunrise flare that sits exactly on the planet's horizon
- ✓Satellites with fading trails and a camera that follows the mouse
- ✓Still and reduced-motion modes, tuned for phones
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. Tune one thing at a time: planet size, glow, then orbits.
— 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.
