Loading…
Live page · scroll inside
Premiumyoga studio · light · landing page · gsap · lenis · html
Eastlight
A yoga-studio site in pale morning grey and clay: a big serif headline beside today's classes with mats left, a pinned band where scrolling moves a jointed line figure through the twelve postures of Sun Salutation A (names, breath cues, a ghost of the next posture, a jump rail of miniature figures, previous and next buttons), three levels as an open list, a ruled teacher index and an intro offer with prices.
What's inside
- 01Quiet bar with a sun markTurns translucent after 80 px.
- 02Headline with today's classesH1 lines rise from masks; the class rows rise in turn.
- 03Pinned sun salutation scrubScrolling scrubs the figure through the twelve postures of Sun Salutation A: every joint interpolates between neighbouring postures with a smoothstep that holds briefly on each one; the text and the rail update at each step; the ghost shows where the body goes next.
- 04Three levels as an open listRows rise with a stagger.
- 05Teachers as a ruled indexRows rise in turn; hover shifts the name right.
- 06Intro offer with pricesColumns rise in turn.
- 07Minimal footerNone.
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.
