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