Skip to content

Full Website Designs · Skate Collage

Dead Curb Sneaker Drop

A skate brand's sneaker drop as a xerox collage: a huge DEAD CURB that glitches every few seconds, a sneaker cut out like a sticker that floats and swaps colourways, stickers you can drag across the hero, a live drop countdown, caution tape, product cards with RGB-split glitch hover and a raffle form.

  • Full Site
  • E-commerce
  • Stickers
  • Drag
  • Hover
  • Typography

The full prompt

Show the prompt that defines the layout, motion and design language
Build a "Dead Curb Sneaker Drop" React component.

CONCEPT: The drop page for a small Tel Aviv skate brand's first sneaker, CURB-01. It should look like a photocopied zine pasted onto a wall: torn colour paper, stickers, tape, huge condensed type and a little glitch.

LAYOUT & CONTENT:
- Nav (64px, 3px ink rule): 'DEAD CURB SK8 CO.', DROP 01 / TEAM / VIDEOS / STOCKISTS, bag icon 'BAG (0)'.
- Hero (760px) over a halftone dot texture: a torn pink paper shape behind 'DEAD' (ink) / 'CURB' (paper fill, ink outline) at 300px; a torn cobalt shape on the right holding the sneaker (SVG side profile: sole with dashed stitching, upper, lightning stripe, laces, heel tab) with a thick paper cut-out outline like a sticker, and a handwritten 'colourway: pigeon'. Three stickers: a yellow 'ONLY 300 PAIRS', a round spinning 'MADE FOR CRACKED CONCRETE', a black handwritten 'skate them, don't save them'. Bottom: 'ENTER THE RAFFLE' with a pink offset shadow and 'DROP IN 02:13:44:09'.
- Caution tape band (yellow, rotated -2deg): 'DROP 01 ✕ FRI 18:00 ✕ RAFFLE ONLY ✕ ONE PAIR PER PERSON ✕ SIZES 36-47'.
- THE DROP: 150px heading, a short spec line, four white product cards with a coloured shoe panel, name, price (₪459 / ₪489) and pair count.
- THE TEAM: three rider names as tilted paper labels, a handwritten line in cobalt, a 'WATCH "PIGEON" (11 MIN)' link.
- WIN A PAIR: black band with a raffle form (email, EU size select, yellow submit with pink shadow).
- Footer: logo, shop area and days, socials.

INTERACTIONS & MOTION:
- Glitch headline: every 2.8s the title jumps for ~0.25s with a pink/cobalt RGB split (text-shadow ±8px) and a skew, using steps(1) keyframes; still the rest of the time.
- Sneaker floats (y 0 to -18, rotate -8 to -4, 3.2s) and swaps colourway every 2.6s (Pigeon, Wet Paint, Bubblegum, Night Bus) with AnimatePresence: enter from x 60 + blur 4px, exit fast to x -60.
- Stickers pop in on springs (300/15), are draggable inside the hero (dragConstraints = hero ref, dragElastic 0.2, scale 1.1 while dragging, touch-action none only on the sticker).
- Countdown ticks every second with tabular numerals.
- Tape and the round sticker loop linearly.
- Product cards: start slightly rotated, straighten and lift on hover; the product name splits into pink and cobalt slices (clip-path bands) that jitter sideways with steps(2).
- Rider labels slide in from the left with stagger; the submit button presses into its shadow.

DESIGN SYSTEM — Skate Collage:
- Xerox paper #ECE6D8, ink #141414, hot pink #FF2E88, cobalt #2340FF, tape yellow #FFC700, grey #8B867B.
- Square corners, 3px ink borders, hard 4-8px ink offset shadows, torn-paper clip-path polygons, 6px halftone dots.
- Bricolage Grotesque 800 at font-stretch 75% for display, Caveat for handwriting, Space Mono for body and labels.

CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances, under 300ms for UI feedback, exits faster than entrances. Animate transform, opacity, clip-path and SVG attributes only. Ambient loops pause or go static under prefers-reduced-motion via useReducedMotion() and a CSS media query.
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no claims the business cannot back up. All brands are fictional.
- Icons: lucide-react where icons are needed; illustrations are inline SVG, CSS or canvas, no external images.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes, tabular numerals for times and prices. Nothing on the page may grab focus or scroll the window.

OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load any Google Font it needs with next/font/google.

How to use this prompt

  1. 1. CopyUse “Copy Claude Prompt” above. It includes the layout, the spring values and the design rules.
  2. 2. Paste into ClaudeAdd your own brand name, copy and colors at the top of the prompt if you like.
  3. 3. Drop it inYou get one file with React, Tailwind and Framer Motion. Install framer-motion and lucide-react.