Skip to content

Full Website Designs · Sticker Pop

Noa Shiloh Athlete Website

A personal-brand site for a 400 m hurdler: a giant name behind a pictogram athlete, a cursor-following lime lens that reveals her technique data (tap to lock), sticker overlays, a split-by-split hurdle track and Saturday kids' clinics.

  • Full Site
  • Sports
  • Personal Brand
  • Mask Reveal
  • Stickers

The full prompt

Show the prompt that defines the layout, motion and design language
Build a "Noa Shiloh Athlete Website" React component.

CONCEPT: The personal site of an Israeli 400 m hurdler on the road to the 2028 Games. It sells her Saturday kids' clinics and a small merch store, and it should feel like a race-day poster covered in stickers: bold, graphic, a little cheeky, the energy of a Formula 1 driver's personal site.

LAYOUT & CONTENT:
- Nav (72px): black circle monogram 'NS' in lime, links Races / Clinics / Sponsors, a lime 'STORE' button with a bag icon.
- Hero (760px, cool grey ground): the name 'NOA SHILOH' in a 15rem condensed black display face across the full width; in front of it an Otl Aicher-style pictogram of a hurdler clearing a hurdle, drawn in SVG from thick round-capped strokes and a circle head. Three stickers sit on top: a black round 'PERSONAL BEST 54.31 ROME, JUNE', a lime tape strip 'ROAD TO LA28', a white star 'ISR'. Bottom-left one line of bio; bottom-right a 'TAP TO LOCK' control with a lime hand-icon tile.
- Results ticker: black band, city + time pairs scrolling, the PB highlighted on a lime chip.
- 'One lap, ten hurdles': a track line with ten hurdle glyphs; the selected hurdle's split shows in an 8rem number with stride count and approach distance.
- Saturday clinics (black section): headline with 'clinics' in lime, a short paragraph (Hadar Yosef stadium, ₪180 a session), then a list of dated sessions with age group, time, spots left and a 'Book a spot' / 'Join waitlist' button.
- Store: one large and two smaller product tiles (race cap, lane 7 tee, sticker sheet) drawn in SVG, name and price below.
- Footer: full lime block, press email, 'RUN YOUR RACE' in 13rem display type, small links row.

INTERACTIONS & MOTION:
- Hero lens: a 190px circle follows the cursor (springs stiffness 260, damping 28) and clips a second layer: lime ground, the name as outlined type, the pictogram as a line drawing with lime joint markers and mono technique data (lead knee 172°, trunk lean 31°). Clicking anywhere in the hero, or the 'TAP TO LOCK' button, freezes the lens in place (aria-pressed). The circle grows from 0 on enter and shrinks on leave unless locked. Convert pointer coordinates by the element's rendered scale.
- Stickers lift and twist on hover (spring stiffness 300, damping 12-14) with a soft tinted drop shadow.
- Ticker loops linearly over 26s.
- Hurdles: hover, focus or click selects one; it fills lime and rises 8px on a spring; a runner dot travels the track once (1.6s ease-in-out cubic-bezier(0.77, 0, 0.175, 1)) when the section enters view.
- Clinic rows nudge their button 6px right on hover; store tiles rise 10px and tilt 2°.

DESIGN SYSTEM — Sticker Pop:
- Ground #E7E7E2 (cool, not cream), ink #141414, one accent lime #D4FF3F, white for stickers only.
- Big Shoulders Display 800-900 uppercase for display, Geist for UI and body, Geist Mono only for data (times, angles, spot counts).
- Stickers are the only decoration: die-cut circles, tape strips and stars with a soft shadow tinted from the ink. Corners: 12px controls, 28px product tiles.

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 and clip-path only. Respect prefers-reduced-motion via useReducedMotion() (loops and cursor effects become static).
- Hover-only effects are gated to fine pointers; the lens starts open (static) when reduced motion is requested.
- 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, no external images.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes, text contrast at least 4.5:1, tabular numerals for times 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.