RageBait-AI

home screen
game dashboard
end screen

Inspiration

The inspiration for RageBait-AI came from the high-pressure environments of modern DevOps and Cyber-Ops. We noticed that "system failure" scenarios in real life are often chaotic, loud, and emotionally draining. We wanted to gamify that stress. We were particularly inspired by the "antagonistic UI" concept—where the software isn't just a tool, but a character that reacts to your failures with snark and your successes with begrudging respect. We wanted to build a bridge between traditional reaction games and modern LLM-driven interactivity.

What it does

RageBait-AI is a high-intensity reactive systems simulator that challenges players to maintain "System Stability" while being bombarded by simulated maintenance alerts.

Reactive Gameplay: Players must manage a rapidly growing queue of tasks involving memory leaks, security breaches, and cooling failures.
AI Antagonist: Powered by Gemini 2.0 Flash, a "System Operator" AI monitors your every move. It analyzes 7 game-state vectors (Score, Stability, Streak, Queue size, Difficulty, Entropy, and Tier) to deliver context-aware, razor-sharp roasts or rare praise.
Dynamic Entropy: The difficulty isn't linear; we implemented an "Entropy" model where the system's unpredictability scales based on the player's performance and time elapsed.
Global Competition: A zero-trust leaderboard system allows players to verify their reaction times against the world via a secure backend.
Inclusive Accessibility: A dedicated "Blind Mode" transforms the visual chaos into a high-fidelity audio environment, making the game playable for users with visual impairments through semantic audio cues.

How we built it

We architected RageBait-AI with a "Front-end First, Backend-Secure" philosophy:

The Kinetic Layer (Frontend): Built with React 18 and Vite. We used Framer Motion for hardware-accelerated animations (like the "Danger Pulse" shake effects) and Tailwind CSS for a premium glassmorphic, "cyber-ops" aesthetic.
The Logic Layer (Serverless): We utilized Vercel Serverless Functions (TypeScript) to handle the heavy lifting. This keeps our Gemini API keys and Firebase Admin credentials secure from the client side.
The Brain (AI): We integrated Gemini 2.0 Flash via the Google AI SDK. We designed a precise system prompt that forces the AI to stay in character—terse, operator-speak, and cynical.
The Ledger (Database): Firebase Cloud Firestore stores the leaderboard records. We implemented a strict validation layer using Zod to ensure no spoofed or injected data reaches the database.
Accessibility Engine: We built a custom audio-cue system that maps visual alert types to distinct frequencies and ARIA-live announcements.

Challenges we ran into

Latency in Roasts: Waiting for an LLM response during a high-speed game is a buzzkill. We solved this by implementing a "Canned-to-AI" hybrid system. The game displays a pre-written roast instantly, while the backend fetches a personalized Gemini response in the background for the next interaction, ensuring the flow is never interrupted.
State Synchronization: Managing high-frequency game loops in React can lead to re-render bottlenecks. We optimized this by using a refined GameContext with a reducer pattern and memoized UI components to ensure constant 60FPS even when the "Entropy" is maxed out.
Security vs. Speed: Designing a leaderboard that is "client-read" but "server-write" only required a robust API proxy to prevent players from spoofing high scores via the browser console.

Accomplishments that we're proud of

Contextual Awareness: The AI doesn't just say random mean things; it knows when you're on a 10-streak but your stability is dropping. It feels like the system is visceral and alive.
Premium Visual Polish: We achieved a high-fidelity "Cyber-Ops" feel using subtle CSS filters, SVG patterns, and dynamic UI shaking that reacts to the system’s health.
Blind Mode Integration: We are incredibly proud of making a fast-paced reaction game accessible. Seeing a game of this type provide a meaningful experience for blind users through semantic audio mapping was a major milestone for us.

What we learned

LLM Latency Management: We learned that the "feeling" of speed is more important than the actual round-trip time. UI/UX tricks can mask API latency effectively to keep the player immersed.
Serverless Efficiency: We discovered how to optimize Node.js-based serverless functions for cold-start performance, which is critical for real-time game interactions.
Component Composition: Using Radix UI primitives taught us how to build complex, accessible UI components without sacrificing the extreme custom styling required for a cyberpunk theme.

What's next for RageBait-AI

Multiplayer "Co-op Chaos": A mode where one player manages the tasks while another player "hacks" the AI to try and silence the roasts.
Voice Commands: Allowing players to clear alerts using voice-recognition patterns to double-down on the "System Operator" fantasy.
Custom "Personalities": Allowing users to choose between different AI operator personas—from the current cynical veteran to an overly-enthusiastic robotic assistant.
Edge AI Integration: Investigating local WebGPU-based LLMs to remove API latency entirely for the trash-talk system.