Loading…
Live page · scroll inside
FreeIllustrator portfolio · light · landing page · gsap · lenis · html
Folio Illus
An illustrator's portfolio on warm paper with coral and garden green: the hero is a hillside-at-dusk illustration shown as a pencil sketch (outlines, offset ghost lines, hatching) with a soft circle of finished, grain-textured colour that follows a pencil cursor, wanders a figure-eight when idle (pausable) and grows to fill the picture on 'Show it all'. Then six coloured vignettes, shed notes with clients, postcard rate cards and a coral hello band.
What's inside
- 01Pencil barSolid after 80 px.
- 02Sketch-to-colour reveal heroWith a mouse, the colour circle trails the pointer (0.35 s ease) and a pencil rides along. Idle or on touch, the circle wanders the scene on a slow figure-eight; Pause stops it. 'Show it all' grows the circle to fill the frame.
- 03Vignette gridCards rise; hovering tilts a vignette by 3°.
- 04Shed notesCard rises.
- 05Rate cardsCards rise and settle from a small tilt.
- 06Hello bandHeading lines rise.
- 07FooterNone.
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.
