Floating voxel island that builds itself (Three.js)
A pastel floating voxel island that drops in block by block, with a looping cube waterfall, drifting clouds, soft shadows and drag-to-spin.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a light, pastel landing hero for a [STUDIO TYPE, e.g. voxel / 3D world studio] with a live floating voxel island that assembles itself block by block. Brand: [STUDIO NAME] - [WHAT YOU MAKE IN ONE SENTENCE] Headline: [LINE 1] / [LINE 2, with 1-2 words in a green-to-blue gradient] Palette: [e.g. sky #b7d9f6 -> pink #efe2f3 -> peach #fdeadb, ink #1a1d31, grass #93d36b] 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 procedural voxel island from seeded noise in one InstancedMesh
- ✓A block-by-block drop-in assembly you can replay
- ✓A looping cube waterfall and drifting voxel clouds
- ✓Soft shadows, drag-to-spin with inertia and live block counts
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 2, with a step-by-step video walkthrough and AI feedback on your project.
