Holographic 3D event ticket (CSS 3D + foil)
A conference page with a silver-holographic ticket that tilts with your pointer under a spotlight: sliding foil, glare, a perforated stub and a live countdown.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a dark landing page for a [EVENT TYPE, e.g. tech conference] whose hero is a silver-holographic 3D ticket that tilts with the pointer under a spotlight. Brand: [EVENT NAME] — [DATES · CITY] Headline: [LINE 1] / [LINE 2, in a holo gradient] On the ticket: [ATTENDEE NAME] · [PASS TYPE] Palette: [e.g. stage #06060a; holo gradient #9bf3ff → #b9a4ff → #ffa6dc → #ffe0a3] 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 CSS 3D ticket with a spring tilt and real edge thickness
- ✓Holographic foil from blended gradients and canvas-made masks
- ✓A spotlight stage with dust, floor glow and colour spill
- ✓A perforated stub, decorative code and a live countdown
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.
