Loading…
Live page · scroll inside
FreeSmall-business website builder · light · landing page · gsap · lenis · html
Stackr
A website-builder site in warm white with acid lime and violet: the hero pins while scrolling snaps five blocks from a palette into a pottery studio's page, each section growing out of its chip with GSAP Flip, until the address bar reads Published (chips also place on click). Then a strip of four miniature templates, a numbered list of what's included in the wide display face, offset 'stacked block' pricing that drops in, and a lime CTA.
What's inside
- 01Snap-block barSolid after 80 px.
- 02Pinned snap builderPinned for about two screens. At set points of the scroll each chip morphs into its full section in the page (GSAP Flip from the chip's box, 0.7 s), the chip dims to 'placed' and the page grows; scrolling back returns them. At the end the address bar turns green with Published. Clicking a chip places it straight away.
- 03Template stripCards rise in sequence; hovering lifts a card.
- 04Included listItems rise one by one.
- 05Snap cardsCards drop in and snap with a small bounce.
- 06Lime publish 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.
