GAMEPLAN
Overview
GAMEPLAN is a tactical simulation and analysis platform built for Cloud9's VALORANT coaching staff. It allows coaches to plan and simulate 5v5 round strategies in a WebGL-powered environment, replay real matches with AI-generated narration, and share tactical breakdowns with their team.
Challenge
Esports coaching at the pro level demands fast iteration on strategies. Coaches needed a way to visually simulate round plans without relying on in-game tools, and existing solutions lacked AI-assisted analysis. The key challenge was building a real-time WebGL simulation that felt responsive while integrating AI commentary over match replays.
Approach
I chose Pixi.js for the WebGL simulation layer — it handles 10+ agents, ability zones, and line-of-sight calculations at 60fps. The frontend is built with Next.js and Zustand for state management, with GSAP powering smooth UI transitions. On the backend, FastAPI serves match data and Anthropic Claude generates contextual narration for replay analysis. The entire app is statically optimized and deployed on Vercel.
Outcome
Delivered a fully functional tactical simulator used by Cloud9 coaching staff to prepare for VCT matches. The AI narration feature reduced replay review time by providing automated strategic insights, and the WebGL simulation enabled rapid strategy iteration without needing in-game scrims.
Technical Highlights
- •WebGL 5v5 simulation with Pixi.js — 10 agents, ability zones, LoS calculations at 60fps
- •AI-narrated match replays using Anthropic Claude for strategic analysis
- •Zustand state management for complex simulation state (positions, abilities, round phases)
- •GSAP-powered UI transitions between planning, simulation, and replay modes
- •FastAPI backend serving match data and coordinating AI analysis pipeline