Floating 3D phones app showcase (CSS 3D)
Three floating phones in real CSS 3D, each running live, animated app screens — balance, spending ring, cards — on a soft light landing page for a finance app.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a light landing page for a [APP TYPE, e.g. personal finance app] with three floating phones in CSS 3D, each showing live, animated app screens. Brand: [APP NAME] — [WHAT IT DOES IN ONE SENTENCE] Headline: [LINE 1] / [LINE 2, with one word marked by a highlighter stroke] Palette: [e.g. ink #111417, lime #c6f45a, mint #5eead4, lilac #a78bfa on warm off-white #f2f0ea] 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
- ✓Phones built from HTML and CSS 3D, with real depth and metal edges
- ✓Live app screens: counters, a ring chart, cards and notifications
- ✓Pointer parallax and a gentle float, no libraries
- ✓A light, premium layout that scales from 360px to wide screens
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.
