Scenario Passport Progress
Gamified progress passport: one stamp per real-life scenario, mastery grid lights up at 80% starred phrases.
Full Construction Prompt
ROLE
AI Role
Senior front-end engineer + game-feel designer. Build a "passport" progress view that turns language practice into collecting stamps for real-life scenarios.
STACK
Target Stack
React + TypeScript + Tailwind CSS + Framer Motion. Progress in localStorage; no account.
LAYOUT
Layout
Header with overall line ("3 of 8 scenarios stamped"). Stamp grid: 4 cols desktop, 2 mobile; each stamp is a circular badge with scenario icon + name; unearned stamps are dashed-outline and muted, earned stamps are filled with a slight rotation (-4deg, like a real ink stamp) and the completion date. Below: per-scenario mastery bars (starred phrases / total), and a printable can-do checklist.
TYPOGRAPHY
Typography
Stamp name: 0.8rem/600 uppercase. Header count: 1.75rem/700. Bar labels: 0.85rem.
COLOR TOKENS
Color Tokens
--background: 40 30% 97%; --card: 0 0% 100%; --foreground: 222 30% 12%; --primary: 205 100% 50%; --stamp: 350 70% 45%; --muted-foreground: 215 15% 42%; --border: 210 25% 88%.
SPACING
Spacing
Grid gap 1.25rem; stamp size 7rem circle; section padding 4rem/3rem.
ANIMATION
Animation
Newly earned stamp animates in with a stamp-down spring (scale 1.6→1, rotate to -4deg, 0.35s). Mastery bars animate width on view. Reduced motion: instant.
RESPONSIVE
Responsive
2-col stamps on mobile; checklist becomes single column; print stylesheet shows only the checklist.
SAMPLE COPY
Sample Copy
Scenarios: "Taxi", "Restaurant", "Market", "Hotel", "Emergency", "Small talk", "Shopping", "Directions". Can-do line: "I can ask a driver to use the meter."