# Season pass track > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The season pass screen of **Kitecrest**, an invented kite-racing game, in its fourth season, "Monsoon Run". Thirty tiers run along a horizontally scrolling rail with two lanes: premium on top (saffron, locked) and free underneath (mint, in the thumb zone). The player is at tier 12 with 640 of 1,000 XP, and three free rewards (tiers 10, 11, 12) glow because they have been reached but not claimed. Tapping Claim lifts the reward icon out of its card, flies it in an arc into the satchel chip in the header, which bumps and counts up, and the XP bar fills by 120. The third claim crosses 1,000 XP and the tier numeral springs from 12 to 13. The monetisation is honest: one "Unlock premium · €9.99" button opens a plain light sheet that lists exactly what the lane contains, line by line, with counts that add up to the 30 premium tiers. The visual language is custom game UI on iOS-style sheet physics. ## Reference behaviour 1. Initial state: tier 12, XP 640 / 1,000, "360 XP to tier 13", countdown "Season ends in 18d 06:41:12" ticking down once per second. Satchel chip shows 3. 2. The rail is pre-scrolled so tier 9 peeks on the left edge and tier 13 peeks on the right; tiers 10, 11 and 12 sit in full view. Scrolling is native horizontal overflow with `scroll-snap-type: x proximity` on 92px columns. 3. Tiers 1 to 9 on the free lane are claimed: a 20px mint check badge, icon at 45% opacity, label in `--text-3`. Tiers 10 to 12 free are claimable: mint border, 1px mint ring plus a 22px glow that breathes on a 2.4s loop, and a 26px mint "Claim" pill; the whole 80 × 128 card is the button. 4. Every premium card shows a 20px lock disc top right and its label in solid `--locked` (`#C9B98F`), never faded with opacity. 5. Track: a 4px line through the middle row with a numbered pill per tier. Passed tiers are mint, the current tier is a larger cream pill (40 × 32, 17px), future tiers are `--surface-2` with `--text-2` numerals. 6. Tap Claim: the card's icon is cloned at its exact rect and flown to the satchel icon in 680ms along a three-key arc (up 70px and scaled 1.35 at 40%, ends scaled .6). On landing the clone is removed, the satchel count goes up by one and the chip scales 1 → 1.18 → 1 in 420ms on a spring. 7. A free claim adds 120 XP: the bar width transitions in 620ms expo-out, the numbers update, and "+120 XP" floats up 22px and fades in 900ms. The card becomes claimed. 8. When XP reaches 1,000 the tier goes up: XP wraps to the remainder, the tier numeral bumps (520ms spring), the column states move along, and the new tier's free reward becomes claimable. In the demo the third claim lands exactly on 1,000, so the screen reads Tier 13, 0 / 1,000. 9. After a claim, focus moves to the next Claim button in the same lane; if it is off-screen the rail scrolls it into view (smooth, 120px from the left edge). 10. "Tier 13 next" card under the rail names the next tier's free and premium rewards and updates on tier up. 11. Tap "Unlock premium · €9.99": a 66% scrim fades in (280ms) and a light sheet rises (420ms iOS sheet curve). Focus goes to "Pay €9.99". The sheet lists six kite skins, six string trails, two glider frames, 1,600 Gale coins and "12 rewards already reached, claimable now", then a plain note: no XP boosts, no gameplay advantage, the end date. 12. "Not now", the scrim or Escape closes the sheet and returns focus to the opener. Tab is trapped between the two sheet buttons. 13. "Pay €9.99" (the demo stands in for the store's own payment sheet): the sheet closes, every reached premium card (tiers 1 to 12) turns claimable with a saffron ring and pill, the buy button becomes a disabled "Premium unlocked" with a check, and the note changes to a thank-you line. Premium claims fly to the satchel too but add no XP. ## Structure ``` 390 × 844 (54px top and 34px bottom left clear) ┌──────────────────────────────────────┐ │ 54px safe area │ │ KITECREST · SEASON 4 ( 3) │ header 20px gutters, chip 44px tall │ Monsoon Run (28px display) │ │ ┌──────┐ 640 / 1,000 XP │ hero grid: 104px tile + 1fr │ │ TIER │ ████████████░░░░░░ │ bar 14px │ │ 12 │ 360 XP to tier 13 │ │ └──────┘ ◷ Season ends in 18d 06:.. │ │ PREMIUM LANE TIERS 1–30 │ lane labels 12px caps │ ┌────┐┌────┐┌────┐┌────┐┌── │ premium cells 80×128 │ │ ││ ││ ││ ││ │ │ └────┘└────┘└────┘└────┘└── │ │ ─9───10────11────12────13── │ node row 44px │ ┌────┐┌════┐┌════┐┌════┐┌── │ free cells, glowing when claimable │ │ ✓ ││Claim││Claim││Claim││ │ │ └────┘└════┘└════┘└════┘└── │ │ ✓ FREE LANE SWIPE FOR MORE TIERS│ │ ┌──────────────────────────────────┐ │ next-tier card, 18px radius │ │ Tier 13 next · 50 coins · trail │ │ │ └──────────────────────────────────┘ │ │ [ Unlock premium · €9.99 ] │ 56px pill, margin-top auto │ One-time purchase for Season 4. ... │ │ 34px home indicator │ └──────────────────────────────────────┘ Sheet: fixed bottom, radius 28 28 0 0, padding 12 22 34, light paper. ``` - `
`: eyebrow, `

` season name, satchel `