World Cup Fighter
A silly cartoon fight simulator — 55 teams, procedural sound, shareable battle cards.
Problem
None whatsoever. The World Cup was on, and the world needed a way to settle matches by cartoon combat.
Context
A palate-cleanser project — the kind you build to stay in love with building. It shares the site's infrastructure but none of its seriousness.
Design
Two fighters, one arena, one button. Fifty-five teams with flags and colours, a battle engine that scripts each round, and a result card designed to be screenshotted and argued about in group chats.
Implementation
React and TypeScript inside this site's Next.js app. Animations by framer-motion; every sound is generated procedurally with the Web Audio API — no audio files shipped at all. Share cards are rendered with html2canvas so a battle result travels as an image.
Lessons learned
Procedural audio is criminally underused: zero assets, instant load, and punches can vary every time. And a share card is the whole growth strategy for a toy — build the screenshot first.