Loading…
Live page · scroll inside
FreeCeramics / E-commerce · light · landing page · gsap · draggable · inertia · lenis · html
Kiln
A ceramics shop in clay and cream: a potter's wheel loader lifts away with a curved lip, an arch-cropped hero photograph tilts in 3D under the pointer with a glare, the drop is a draggable, inertia-throwing product rail with tilting cards and a DRAG cursor, and a pinned firing block counts to 1260 °C while the page heats to ember.
What's inside
- 01Wheel loaderThe wheel spins 540°, the name appears, the slab lifts out of frame.
- 02Shop navLinks tint accent on hover; the bar frosts after 80 px.
- 03Arch hero with tiltLines rise from masks; the arch scales in and tilts under the pointer with a glare; the badge pops then spins, faster when you scroll, until its centre button pauses it.
- 04Draggable product railGrab and throw the rail; it snaps to cards; cards tilt with a glare on hover; a DRAG disc follows the pointer.
- 05Pinned firing counterPinned for 180 %: the number climbs to 1260, an ember glow fills the block (it jumps through the mid tones while the text flips to cream, so the copy never sits mid-grey on mid-brown), the scale fills.
- 06Glaze accordionColumns rise in; the hovered one grows to 2.8× and reveals its name.
- 07Studio figures + quoteFigures unroll from the top; the quote inks on scroll.
- 08Visit boxThe box rises in; headline lines rise from masks.
- 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.
