Loading…
Live page · scroll inside
FreeSports / Education · light · landing page · gsap · lenis · webgl · html
Vantage
An athlete's site on warm paper: the portrait burns in through noise as the counter hits 100 and only keeps its colour where your cursor has just been, the season runs sideways under a track that draws itself, and every chapter after that lands over the last one like a stack of cards.
Placeholder photos by Lucas Canino, Alexander Fastovets, David Dvořáček, Ben Guernsey and Urban Vintage on Unsplash. Replace them with your own before launch.
What's inside
- 01Counter preloaderCounts 00→100 in 1.6 s, then the gate slides up and out in 0.9 s; the hero intro starts as it leaves.
- 02Fixed navLinks underline from left on hover; the bar frosts after 80 px.
- 03Name + WebGL portraitName lines rise out of their clip boxes after the loader; the portrait burns in through noise and repaints in colour under the cursor with a displacement wake.
- 04Season tickerInfinite horizontal loop, 30 s, linear, until the pause button (aria-pressed) stops it.
- 05Scrubbed manifestoWords fill from muted to ink as the section scrolls through the middle of the viewport (scrub).
- 06Pinned season trackTrack translates with scroll while pinned; the lap path draws with stroke-dashoffset over the same distance; cards zoom their photo on hover. Mobile: plain vertical list.
- 07Stacking chaptersEach panel lands over the previous; the one underneath scales to 0.92 and darkens as it is covered.
- 08Parallax galleryEach figure wipes up from a clip inset as it enters while the image settles from 1.15 to 1.0; figures drift at different speeds on scroll; hover eases the image to 1.02.
- 09Big numbersCount up on enter, 1.6 s, power3.out, tabular numerals.
- 10Partners rowNone.
- 11Let's workHeadline lines rise from clip boxes on enter; the button follows the pointer at 0.35 and snaps back elastically.
- 12Footer stripNone.
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.
