Loading…
Live page · scroll inside
PremiumProduct designer portfolio · light · landing page · gsap · lenis · html
Folio Product
A product designer's portfolio in off-white and electric blue built around one case study: a sticky phone runs a five-screen prototype of a pantry app (tonight's dinner, freshness shelves, receipt import, a recipe, a list that knows the cupboard) that swaps screens as five decision steps scroll past, with a rail to jump between them. Around it: a wide heavy statement with drifting UI fragments, a dark pilot-results band, a twelve-week Gantt, CSS-built vignettes of earlier work, a quote and a blue contact band.
What's inside
- 01Name barSolid after 80 px.
- 02Statement with UI fragmentsStatement lines rise; the fragments drift at different speeds as the page scrolls.
- 03Sticky prototype case studyScrolling each step into the middle swaps the phone's screen (new screen rises 24 px and fades in) and moves the rail; the active step's heading darkens. Rail dots scroll to their step.
- 04Pilot results bandNumbers count up.
- 05Twelve-week planBars grow from their start week when the chart enters.
- 06Other workCards rise; the vignette lifts on hover.
- 07Product lead quoteQuote lines rise.
- 08ContactLines rise.
- 09FooterNone.
Utility pages in the same file: 404 · Style guide · Password · Changelog
How to use it
From prompt to a live page.
- 01Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
- 02Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
- 03Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
- 04Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
- 05Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.
