Skip to content

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. 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.