Drop

What's inside

1. 01
   Drop preloader

   The bar fills over 1 s with a stepped ease; the number counts; the wordmark scales from 1.3 with a flash; the slab lifts.
2. 02
   Fixed bar with a live tag

   Turns translucent after 80 px; the tag blinks 1 s.
3. 03
   Scratch-to-reveal hero with countdown

   The countdown ticks every second with a flip of the digit; the scratch layer erases under the pointer with a 48 px soft brush (destination-out), the readout samples alpha every 20 strokes, and past 65 % the rest dissolves on its own with a radial wipe; the card tilts ±5° with the pointer; a slow glint sweeps the foil.
4. 04
   Colourways

   Choosing a chip slides the old photo out and the new in with a hard cut mask; the swatch pair fills; specs crossfade.
5. 05
   Size grid and raffle entry

   Sizes pop in with a stagger; choosing one fills it with the accent and slides the size into the card; the button enables with a pulse; submit shows an entry number with a mono ticket.
6. 06
   Past drops marquee

   Continuous marquee; hovering a tile pauses its row and lifts the tile; the swatch block has a slow diagonal sheen.
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.