C9 Reflex Arena - Cloud9 x JetBrains Hackathon

🎮🎯 An electrifying reaction-time challenge game designed for Cloud9 event booths where fans compete to prove they have pro-player reflexes. Built for the Sky's the Limit - Cloud9 x JetBrains

Comment

Inspiration 💡

The world of esports is defined by milliseconds. Whether it's a frame-perfect flash in League of Legends or a pixel-perfect flick in Valorant, reaction time is the currency of champions.

For the Cloud9 x JetBrains Hackathon, we wanted to tackle Category 4: Event Game. We asked ourselves: "What happens when thousands of adrenaline-filled fans are waiting in line at a C9 booth during LCS or VCT?" They need engagement. They need competition. They need to prove they have what it takes.

C9 Reflex Arena was born from the desire to bring the intensity of a pro-player aim trainer to a casual, accessible browser format. We wanted to build something that wasn't just a "minigame," but a visually stunning, high-performance competitive experience that screams Cloud9.

What it does 🎮

C9 Reflex Arena is a high-octane reaction challenge platform designed for rapid deployment at event kiosks.

  • ⚡ Instant Action: Players jump into 30-60 second "micro-tournaments" where they click targets before they disappear.
  • 🧠 AI Adaptive Difficulty: Powered by GPT-4o-mini, the game analyzes your reaction time (ms) and accuracy (%) in real-time. If you're crushing it, the AI shrinks the targets and speeds up the spawns. If you're struggling, it dynamically adjusts to keep you in the "flow state."
  • 🎨 Deep Customization: Users can unlock and equip 5 dynamic animated backgrounds (Matrix, Nebula, Grid, etc.), 4 mouse trail effects, and 6 target skins.
  • ⚔️ Social Competition: Features a robust Friends System where users can send direct 1v1 challenges, view friend activity, and climb Global Leaderboards.
  • 🔐 Flexible Auth: Supports GitHub OAuth for persistence or a friction-less "Guest Mode" for quick booth turnover.

How we built it 🛠️

We utilized a bleeding-edge stack to ensure 60FPS performance and type safety:

  • Frontend Core: Built with React 19 and TypeScript. We leveraged the latest React Hooks to manage complex game state without unnecessary re-renders.
  • Styling Engine: We embraced the future with Tailwind CSS v4. This allowed for ultra-fast, zero-runtime styling with a custom "Cyberpunk Esports" theme (Electric Blue oklch(0.65 0.24 240) & Hot Pink).
  • Animation & Graphics:
    • Canvas API: Used for the high-performance dynamic backgrounds (Particles, Waves) to keep the DOM light.
    • Framer Motion: For buttery smooth UI transitions and layout animations.
  • Data & State:
    • Spark KV Storage: Used for ultra-low latency persistence of user profiles, high scores, and settings.
    • Functional State Updates: We used strict functional updates for the game loop to prevent closure staleness issues common in React-based games.
  • Artificial Intelligence:
    • GPT-4o-mini: We engineered a prompt system that feeds player telemetry (avg reaction time, miss rate) to the LLM, which returns structured JSON to tweak game variables (spawnInterval, shrinkRate) on the fly.

Challenges we ran into 🏔️

  • The "React Loop" Problem: Building a real-time game loop inside React's render cycle is tricky. We initially faced jittery animations. Solution: We decoupled the game logic from the UI rendering using requestAnimationFrame and Refs for mutable game state, only triggering React re-renders for score updates and UI overlays.
  • Tailwind v4 Integration: Being on the bleeding edge meant dealing with alpha/beta documentation. We had to figure out how to configure the new CSS-based configuration schema to support our custom animation keyframes.
  • AI Latency: We didn't want the game to "pause" while the AI thought about difficulty. Solution: We implemented the AI analysis asynchronously. The game collects a batch of 10 clicks, sends the data, and applies the difficulty adjustments in the background without interrupting gameplay.

Accomplishments that we're proud of 🏆

  • Performance Optimization: Achieving a solid 60 FPS with complex particle effects and mouse trails running simultaneously in the browser.
  • The "Juice": We spent hours polishing the "game feel"—the particle explosions when you click a target, the sound effects, and the neon glow. It feels premium.
  • Seamless Onboarding: The integration of GitHub OAuth alongside a Guest mode means zero friction. A user at a booth can play in 5 seconds, or log in to save their stats forever.
  • Adaptive AI: Seeing the AI actually work—watching it ramp up the difficulty when a skilled player starts clicking—was a huge "aha!" moment.

What we learned 🧠

  • Game Loop Architecture: We deepened our understanding of the JavaScript event loop and how to manage high-frequency state updates without crashing the browser.
  • Generative AI for Logic: We learned that LLMs aren't just for text—they are excellent game balancers. Using JSON mode to control game mechanics opened our eyes to new possibilities in procedural generation.
  • User Engagement: Design matters. Adding the "Friends" and "Challenge" systems completely changed the app from a solo toy into a social platform.

What's next for C9 Reflex Arena 🚀

  • 📱 Mobile & Touch Support: Optimizing the hitboxes for touchscreen kiosks and mobile browsers so fans can practice on the go.
  • 🏟️ Physical Booth Integration: Adding a "Spectator Mode" URL that event organizers can cast to a big screen, showing the current player's run in real-time.
  • 🎁 Reward System: Integrating with the Cloud9 store API to offer discount codes for achieving specific ranks (e.g., "Hit Diamond Rank, get 10% off the new jersey").
  • 🔫 Aim Training Specifics: Adding "Tracking" and "Flicking" specific modes to mirror actual FPS mechanics more closely.

Built With

  • canvas-api
  • framer-motion
  • github-oauth
  • gpt-4o-mini
  • icons
  • phosphor
  • react-19
  • shadcn/ui-v4
  • spark-kv-storage
  • tailwind-css-4
  • typescript
Share this project:

Updates