Page-flip magazine with corner drag (CSS 3D)
An independent magazine you can leaf through: drag a page corner and it folds over with curl shading, or use the arrows, contents and keyboard.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a landing page for an [INDEPENDENT MAGAZINE] with a realistic page-flip issue you can leaf through — drag a page corner and the paper folds over with curl shading. Magazine: [NAME] — [ONE-LINE DESCRIPTION] Issue: [NUMBER, THEME, SEASON, PRICE] Stories: [3–4 titles, each with a one-line dek] Palette: [e.g. espresso desk #1a120d, paper #f3e9d6, ink #211a15, vermilion #df5128, navy #1f2b46, mustard #e8b04b] 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
- ✓Corner-drag fold geometry with clip-path and matrix()
- ✓Curl highlight, crease and cast shadows from gradients
- ✓Warm paper made from SVG noise and CSS gradients
- ✓Arrows, keyboard, contents jumps and a slight 3D tilt
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 9, with a step-by-step video walkthrough and AI feedback on your project.
