Kinetic type poster with cursor warp (WebGL)
A Swiss-poster studio page where giant headline type bends under your cursor like a lens, above outline marquees that slide with your scroll.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a Swiss-poster landing page for a [STUDIO TYPE, e.g. type & motion studio] whose giant headline bends like a lens under the cursor. Brand: [STUDIO NAME] — [WHAT YOU DO IN ONE SENTENCE] Poster words: [LINE 1, e.g. MAKE TYPE] / [LINE 2, e.g. MOVE] (the full stop is a red dot) Palette: [e.g. paper #f1efe9, ink #0f0f0f, one accent red #ff3b14] 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
- ✓Poster type drawn to a canvas and warped live in one fragment shader
- ✓A lens that bulges on hover, pulls on hold and smears with speed
- ✓A red misregistered print plate and a grid that bends with the type
- ✓Outline marquees driven by scroll position and scroll speed
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.
