Loading…
Live page · scroll inside
Freepets/treat subscription · light · landing page · gsap · lenis · html
Tuck & Tail
A small dog-treat bakery's site in biscuit cream, cocoa ink, coral and leaf green: a chunky headline and six treat chips beside Biscuit, an illustrated dog whose pupils follow the pointer, whose ears perk and head tilts at each treat you hover (with a speech bubble verdict), who hops and shows his tongue when you pick one and whose tail wags with your scroll speed; then three box sizes, the kitchen's story with a sourced ingredient list and an owner's quote.
What's inside
- 01Chunky wordmark barTurns translucent after 80 px.
- 02Headline beside a reactive dogBiscuit's pupils follow the pointer within his eyes; hovering or focusing a treat chip perks his ears (rotation) and tilts his head towards it, choosing it makes him hop and show his tongue; his tail wags faster the faster you scroll and settles when you stop; he blinks every few seconds (the pause toggle stops blinking and wagging).
- 03Three box sizesColumns rise in turn.
- 04Kitchen note and ingredientsRows rise in turn.
- 05Owner pull quoteLines rise from masks.
- 06Minimal 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.
