VISUAL PREVIEW · these are the real components from index.html

RankPop — what parents, kids and coaches see

Everything below is generated by the same code that runs the app. Reroll the avatars, scroll the phones, print the contract. Use this page for screenshots, pitches and partner meetings. Open the live app →

1 · Brand palette

Parent Dark (calm fintech) and Kid Neon (arcade). Every color below is a CSS variable in the app.

2 · Avatar evolution (rank never drops)

Rank is lifetime XP. Spending or taxes touch the wallet only, so the avatar only ever moves right. Four visual tiers across eight ranks — then unlimited prestige stars (Aura Supreme ★, ★★ …). Gear unlocks by rank; pets, hats, backgrounds, aura effects and titles are bought with the kid's own Aura in the Aura Shop.

3 · The rank ladder

4 · The three experiences

Kid HUD — the child's tablet, PIN-locked

Parent dashboard — two taps to log anything

Adult pass — no app, no login, one tap

5 · The Official Family Pact

Generated on the device from age-band templates. Signed with a finger. Printed for the fridge.

6 · The rank-up moment

This is the screen kids screenshot. It is also the brand name.

Sound plays in the real app (a synthesized chime — no audio files to load). Confetti respects the "reduce motion" accessibility setting.

7 · Live app

The real thing, inside this page. If your browser blocks it, open index.html directly.