Pixel-dissolve portfolio grid (canvas 2D)
A clean designer portfolio whose code-drawn project covers dissolve into rippling pixels under the cursor, with a View cursor and animated filter chips.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a clean, light portfolio for an [INDEPENDENT DESIGNER OR STUDIO] where every project cover is drawn in code and dissolves into rippling pixels under the cursor. Brand: [STUDIO NAME] — [WHAT YOU DO IN ONE SENTENCE] Headline: [LINE 1] / [LINE 2, ending in one italic serif word] Palette: [e.g. background #f4f3ef, ink #111214, accent blue #2747ff] Projects: [12 x title, one-line description, category Brand / Product / Motion, year] 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
- ✓Twelve unique project covers generated with canvas 2D
- ✓A pixel grid that ripples out from the cursor and re-forms
- ✓Filter chips with a sliding pill and FLIP grid animation
- ✓A springy custom cursor and a loop that sleeps when idle
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.
