Fashion Drop Template
A stark one-page drop site for a limited clothing release: live countdown in the hero and sticky bar, a draggable lookbook card deck, a scarcity-driven product grid, and a first-access waitlist built for conversion.
About This Template
A production-ready one-page drop site for streetwear labels, limited releases, and product launches that live or die by urgency. The art direction is a cold near-black ground with off-white stencil display type and one signal-red accent, with every photo pulled into the same campaign by a high-contrast desaturated treatment and red tint.
Read the full template overview
A live countdown runs in the hero and the sticky utility bar, the signature lookbook deck lets visitors drag and flick through campaign cards with momentum, edition counts and animated scarcity bars run through the product grid, and repeated first-access CTAs funnel everything to a hero-grade waitlist form. Swap the photos, copy, and drop date for your own release and deploy anywhere as static files.
What's Included
- Complete deployable one-page site: sticky bar, countdown hero, lookbook deck, red CTA band, product grid, manifesto, drop rules, waitlist, footer
- Draggable lookbook card deck with inertia flicks, snap-back, grab-lift shadows, infinite cycling, button plus arrow-key controls, and a live look index that tracks the top card
- Live drop countdown shared by the hero and sticky bar, with a digit scramble garnish on load
- Staggered hero intro over a giant ghost edition number, print-sheet spec marks, and a stencil ticker strip (pure CSS marquee, runs without JavaScript)
- Garment-tag design system in pure CSS: barcode marks at three sizes, spec-ref section headers, SKU rows on every product card, a ticket-stub first-access pass, and a barcode footer mark
- Structural devices running the full page: vertical margin rules, hazard-tape seams on the red band and footer, ghost stencil numerals, red title rules, a reversed second ticker, and CTA buttons that roll live hazard tape across themselves on hover
- Finishing details throughout: film grain over the ink ground, numbered chips on every product photo, and a rubber stamp that slams onto the manifesto on scroll
- Conversion-focused layout: repeated first-access CTAs, urgency microcopy, and a hero-grade signup form
- Edition counts and animated scarcity bars on every product card
- Product photos snap from the mono campaign grade to full colour on hover or focus, with a demo add-to-cart button that slides over the photo, intentionally unwired and ready to point at your checkout
- Unified campaign photography bundled as optimised WebP files with the high-contrast grade baked in, plus red overlays and background fallbacks
- Lenis smooth scrolling wired in and fully optional
- Accessible: reduced motion gets a static lookbook spread and full page, focus mirrors hover, no-JS keeps every word readable
Perfect For
- Streetwear and independent clothing label drops
- Limited edition product releases with a fixed on-sale moment
- Sneaker, print, or collectible launches that need a waitlist
- Pre-launch landing pages built around a countdown
- Learning how Draggable, InertiaPlugin, and ScrollTrigger compose into a full page
How It Works
The lookbook deck
One script initialises each section inside a single gsap.context with gsap.matchMedia, skipping any section it cannot find. The lookbook deck adapts the draggable card stack pattern: Draggable with InertiaPlugin measures release velocity to decide whether the top card flies off or springs back with an elastic ease, and buttons and arrow keys drive the same dismiss and restore tweens.
Countdown and reveals
Both countdowns share one setInterval clock computed client-side, with a gsap tween scrambling the digits into place on load. Scroll reveals, the manifesto stamp slam, and scarcity bars animate once via ScrollTrigger; the ticker strip is a pure CSS marquee so it runs even without JavaScript; and a prefers-reduced-motion branch leaves the deck as a static spread grid with everything visible and the ticker frozen.
Questions about this template
What happens after the countdown hits zero?
It stops at zero and the page stays up. There is no automatic switch to an on-sale state, because a static page has no server to tell it what happened. Plan to swap the hero copy and point the product buttons at your checkout on the day; treat the countdown as the pre-drop phase of the site, not the whole lifecycle.
The add-to-cart button is unwired. What do I connect it to?
Anything with a product URL. It is intentionally left as a demo button so it cannot silently fail: point it at a Shopify product, a Stripe payment link, or a Big Cartel listing. The scarcity bars and edition counts are likewise numbers you set, not live stock.
Can someone use the lookbook deck without dragging?
Yes. The deck has button controls and arrow-key support alongside the drag, and it cycles infinitely either way. Under reduced motion it becomes a static lookbook spread showing all the looks at once, so nobody has to interact with it to see the clothes.
My brand is not black and red. Will it survive a repalette?
The colours will change cleanly, the attitude will not. The ink ground, hazard tape, stencil numerals, barcode marks and film grain are the design, and softening them leaves a template that is fighting itself. If you want a gentler drop site this is the wrong one; if you want stark, retint and keep the devices.
Does the waitlist form collect emails?
No, not on its own. It is a designed signup form with no backend. Point it at Mailchimp, Klaviyo, ConvertKit or a form handler before you launch, because a drop site that quietly drops its waitlist signups is worse than one with no form at all.
