Full Website Designs · Street Court
No Look Hoops Drop Website
A streetwear basketball drop on a painted concrete court: a dribbling ball you can grab and throw at the rim (a swish scores and resets the 24-second shot clock), a flipping countdown to the drop, floating product trading cards, court lines that draw themselves and two opposing word marquees.
- Full Site
- Sports
- Drag
- E-commerce
- Marquee
The full prompt
Show the prompt that defines the layout, motion and design language
Build a "No Look Hoops Drop Website" React component.
CONCEPT: No Look is a fictional Tel Aviv streetwear label for pickup basketball. Drop 07, the 'No Look Pack', lands Friday at 18:00 with 400 pieces. The site is an outdoor court: cracked concrete, a red painted key, a backboard with a shot clock, and a ball you can actually shoot.
LAYOUT & CONTENT:
- Nav (70px, concrete, 4px ink rule below): 'No look.' wordmark with a red full stop, links DROPS / LOOKBOOK / COURTS / ARCHIVE, 'BAG (2)' with a bag icon.
- Hero (760px): concrete ground made from two offset dot grids; a red trapezoid key with chalk-white lines, a three-point arc and a free-throw ellipse in SVG; a pole, a white backboard with a red target square, an orange-red rim and a chalk net drawn as lines. A black 24-second shot clock sits on top of the backboard. Left: mono line 'DROP 07. FRIDAY 18:00. 400 PIECES', headline 'No look / pack' (second line red) at 8.6rem, one paragraph about heavyweight mesh, buttons 'Get on the list' (black pill) and 'Take the shot' (outlined). Under the headline area a 'BUCKETS' score counter. A black tape strip at -1.5deg runs a marquee along the bottom.
- Countdown band (black): 'DROP 07 UNLOCKS IN' and four 6.5rem blocks (days, hours, min, sec) plus a 'Text me when it drops' phone input pill.
- The pack: three product trading cards (reversible jersey 07 ₪240, asphalt high-top ₪590, cage shorts ₪180) with SVG illustrations, card number 01/03, fanned at -7, 3 and 9 degrees.
- Pop-up runs (red section): a black half-court SVG with four pulsing location pins, and a list of four courts with date and time.
- Lookbook: two rows of 7.5rem words (Handles, Fadeaway, No look, And one, Cross over) alternating filled and outlined, moving in opposite directions.
- Footer: black, 11rem 'No look.' and a small address/email column.
INTERACTIONS & MOTION:
- Ball (signature): idles as a dribble (|sin| bounce, rotating). Pointer down grabs it with pointer capture; release throws it with the measured velocity of the last 5 samples (clamped to 2600 px/s). Simple physics in useAnimationFrame: gravity 2600 px/s^2, wall and floor bounces (x0.6, x0.55), backboard rebound. Passing down through the rim scores +2: a 'Swish +2' stamp pops on a spring, the score bumps and the shot clock resets. After 2.6s the ball dribbles home. 'Take the shot' throws a preset make for keyboard and touch users. A shadow on the floor scales with the ball height.
- Shot clock counts down in tenths below 5 seconds, flashes red at zero, then restarts.
- Countdown digits slide out and in (AnimatePresence popLayout, 0.35s ease-out) every second.
- Product cards float on staggered 3-4.2s loops and straighten + scale 1.04 on hover. Court lines draw with pathLength over 2.2s when the section enters view; pins pulse on staggered 1.8s rings and the hovered court's pin turns red.
DESIGN SYSTEM, Street Court:
- Concrete #C9C5BC, ink #151412, court red #E8321E (the single accent), chalk #FBFAF5, ball #D9692B.
- Dela Gothic One for display (uppercase), Space Mono for everything else. Pills for buttons, 18px card corners, 4px ink borders.
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, ease-in-out cubic-bezier(0.77, 0, 0.175, 1) for on-screen travel, linear only for constant loops. Animate transform, opacity, clip-path and pathLength only. Drive per-frame values with MotionValues (useAnimationFrame, useTransform) so nothing re-renders React every frame. Respect prefers-reduced-motion via useReducedMotion(): loops, cursor effects and tickers become static.
- Ambient life: the page must visibly move within the first second without any interaction.
- Cursor maths inside a scaled container: convert with (clientX - rect.left) / (rect.width / el.offsetWidth).
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no eyebrow label above every heading.
- Icons: lucide-react where icons are needed; illustrations are inline SVG or CSS, no external images, no real brands or trademarks.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria-pressed / aria-label where state changes, text contrast at least 4.5:1, tabular numerals for times, scores and prices.
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.