Loaf

What's inside

1. 01
   Loaf preloader

   The loaf circle strokes in, the score line draws, the name fades; the slab lifts.
2. 02
   Fixed bar with a wheat mark

   Turns translucent after 80 px; underlines draw.
3. 03
   Proofing-jar hero

   A clock runs the dough through 24 hours in 24 s on a loop: the top edge rises from the ×1 mark toward ×2 with an ease, a dome grows, bubbles appear and swell after hour 3, the readout updates every tick; dragging the slider (or arrow keys) takes over and pauses the clock for six seconds; at hour 22 the jar tints crust-orange and 'Bake' lights up.
4. 04
   Three loaves

   Cards rise with a stagger; hovering rotates the photo 2° and lifts it; 'Choose' scrolls to the form and selects.
5. 05
   How it works

   Photo unrolls and drifts; steps rise with a stagger; numerals count from 0.
6. 06
   Delivery-day picker

   Calendar days pop in with a 10 ms stagger; picking a day bounces the pill, draws a ring around the matching weekday header and updates the summary with a quick fade; toggling the plan animates the per-loaf price.
7. 07
   Minimal footer

   None.

Utility pages in the same file: 404 · Style guide · Password · Changelog

How to use it

From prompt to a live page.

1. 01
   Walk the page

   The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.

2. 02
   Pick a palette

   Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.

3. 03
   Pick your stack

   Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.

4. 04
   Copy the prompt

   It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.

5. 05
   Make it yours, then iterate

   Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.