Particle DNA double helix with scan and annotations
A genomics landing page with a right-handed DNA helix of 35,000 particles, depth of field, a scanning read band and hover annotations on a small gene.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a dark landing page for a [PRODUCT TYPE, e.g. AI genomics platform] with a live 3D DNA double helix made of particles, a scanning read band and hover annotations. Brand: [PRODUCT NAME] — [WHAT IT DOES IN ONE SENTENCE] Headline: [LINE 1, light] / [LINE 2, bold teal gradient] Palette: [e.g. navy-black #03060b, teal #5eead4, sky #7dd3fc; bases A #5eead4, T #5cbcfa, G #c4b5fd, C #fda4af] Technical rules - One file. Three.js 0.160 from a CDN via an import map; nothing else. Fonts: Manrope + DM Mono. No images.
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 right-handed B-DNA helix with true pitch and grooves
- ✓Depth of field on 35,000 points in one shader
- ✓A scanning band that reads bases and drives a live card
- ✓Hover annotations pinned to the regions of a small gene
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.
