Loading…
Live page · scroll inside
FreeFashion / Editorial · dark · landing page · gsap · lenis · html
Noir
A fashion-house collection page in black and bone: the loader scrambles the name over a counter, a full-bleed monochrome hero resolves its 19 vw Didone headline glyph by glyph, a manifesto rises line by line, then the lookbook pins and scrolls sideways — eight panels that skew with your speed and parallax inside their frames under a progress rule and counter — followed by hover-swapping pieces, a credits list and magnetic pill buttons.
Placeholder photos by Alina Chernovolova, Sergio Santo Pietro, engin akyurt, atelierbyvineeth ..., Bernd 📷 Dittrich, Wilhelm Gunkel, Artem Balashevsky and sam manchester on Unsplash. Replace them with your own before launch.
What's inside
- 01Scramble loaderThe word scrambles and resolves while the counter runs to 100, then the cover slides up.
- 02Transparent-to-solid navLinks scramble on hover; past 80 px the bar turns solid with a hairline.
- 03Monochrome heroThe photo settles from a zoom and drifts on scroll; the headline scrambles in; the pill is magnetic.
- 04ManifestoLines rise from masks; cells fade in.
- 05Pinned horizontal lookbookVertical scroll moves the track sideways; panels lean with your speed; photographs parallax inside their frames; the rule and counter follow.
- 06PiecesPieces rise in; hovering crossfades to a second photograph.
- 07CreditsRows rise in sequence.
- 08The showThe headline scrambles in once; the pills are magnetic.
- 09Footer 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.
