3D card carousel with metal, glass and holo finishes
Seven premium payment cards on a 3D ring — brushed titanium, holographic foil, frosted glass and more — with drag, inertia, snapping and a live detail panel.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a dark landing hero for a [PREMIUM CARD / FINTECH BRAND] where seven payment cards float on a 3D ring you can spin. Brand: [BRAND NAME] — [ONE-LINE OFFER, e.g. metal cards on one account, no foreign fees] Headline: [LINE 1, bold] / [LINE 2, light] (e.g. "Carry a card" / "worth keeping.") Cards: [7 NAMES, EACH WITH A FINISH AND 3 SHORT PERKS] 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
- ✓Seven card finishes made only with code and PBR materials
- ✓A holographic foil that shifts with angle and pointer
- ✓Drag and swipe with inertia, snapping, arrows and keys
- ✓A detail panel that swaps with the front card
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 6, with a step-by-step video walkthrough and AI feedback on your project.
