Petal

What's inside

1. 01
   Petal preloader

   Petals scale from 0 with a stagger and a back ease; the name fades; the slab lifts.
2. 02
   Fixed bar

   Turns translucent after 80 px; underlines draw.
3. 03
   Blooming SVG flower hero

   Scrolling 150 vh scrubs the bloom: the stem draws first, leaves unfold from the stem (rotate and scale), then the outer petals rotate open from a closed bud (each petal rotates from its ring angle collapsed toward 0 and scales from 0.3) with a stagger by index, then the inner ring, then the centre dots pop; the whole flower sways 2° with the pointer; the readout counts.
4. 04
   Bouquet builder with colour harmony

   Adding a stem drops a flower head into the cluster with a bounce at a seeded position; removing one plucks it; the harmony label and wheel dots update; the price counts; the wrap recolours the paper cone.
5. 05
   What is in season

   Chips slide an underline; changing the month flips the tiles out and in with a stagger.
6. 06
   Weekly flowers

   The photo fan settles from a tighter angle; cards rise; toggling animates prices.
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.