A playful World Cup 2026 social card generator that turns match-night energy into a shareable chaos forecast.
Fan Mode: 面向社交传播的世界杯赛前氛围生成器，让不懂球的人也能参与赛前聊天。
Fan Mode is a product prototype for people who want to join the World Cup conversation without making a serious tactical prediction. Pick a match, choose where the chaos is happening, select the tone, and generate a 9-tile story card to post before kickoff.
The product question:
Can a World Cup experience feel instantly social for people who may not know football deeply?
This MVP treats the World Cup as a social moment rather than a sports analytics problem. The goal is not to predict the score, explain tactics, or build a betting-adjacent tool. The goal is to give people something funny, specific, and easy to share within one minute.
Core behavior:
Pick a match.
Pick your match-night setting.
Generate a 9-item chaos forecast.
Post your number before kickoff.
Ask friends: how many are hitting tonight?
- Featured match picker: starts from a small curated match list instead of a full schedule.
- Viewing setting: home, bar, watch party, group chat, or scrolling TikTok.
- Chaos level: mild, spicy, or unhinged tone control.
- Deterministic forecast generation: the same shared state recreates the same card.
- 9-tile forecast card: match, group chat, watch party, and social media moments.
- Shareable route:
/card/:payloadreconstructs a shared card from encoded state. - Story card download: exports the card as a PNG with
html-to-image. - Caption actions: copy caption, copy share link, regenerate, or bias a card toward group chat.
- Analytics hooks: lightweight event tracking points for product behavior.
Fan Mode is designed as a social-content mechanic:
- Fast enough to complete before kickoff.
- Funny without requiring deep football knowledge.
- Specific enough to feel tied to a match and viewing context.
- Share-first, with story-card and group-chat behavior as the primary outcome.
- Safe from betting framing or overly serious sports analysis.
The generator combines:
- match metadata and team colors
- viewing setting weights
- chaos-level score ranges
- tile category coverage
- deterministic seed hashing
- excluded tile IDs for fresher regeneration
The result always includes:
- match context
- setting and chaos level
- a score such as
6/9 - 9 unique forecast tiles
- captions and a share prompt
- tags for the generated card
src/
App.tsx Screen flow and shared-card routing
components/
Home.tsx Entry screen and product framing
Generator.tsx Match, setting, and chaos-level choices
ResultView.tsx Download, caption, link, and regeneration actions
FanModeCard.tsx Share-card presentation
StoryCardFrame.tsx Exportable visual frame
domain/
generateFanMode.ts Forecast generation algorithm
forecastTiles.ts Tile content library
matches.ts Featured match data
shareState.ts Encoded share URL state
analytics.ts Product event hooks
tests/
fan-mode.spec.ts Playwright mobile flow coverage
docs/
superpowers/ Product design specs and implementation plans
- React
- TypeScript
- Vite
- Vitest
- Testing Library
- Playwright
- html-to-image
- Lucide React
- Plain CSS
npm install
npm run devRun checks:
npm test
npm run build
npm run e2e- Fan Mode design spec
- Chaos Forecast design spec
- Fan Mode implementation plan
- Chaos Forecast implementation plan
This is an MVP/product prototype, not a production World Cup platform. The current value is in the product mechanic, share flow, deterministic generation model, story-card export, and test-covered React implementation.
Future directions could include live match data, more tournament fixtures, localized card copy, richer visual themes, social templates for different platforms, and real analytics dashboards.
The README banner was generated with an AI image model and committed as a project asset for presentation purposes.