Fandom Fire is a real-time AI-powered roast battle engine, combining text generation with Google Gemini, voice synthesis with ElevenLabs, and GPU-accelerated fluid visualizations via GLSL shaders. This project demonstrates how modern technologies can be integrated without a backend, npm, or build steps, using only static files and browser APIs. Its three-layer architecture —text generation, voice synthesis, and visual rendering— delivers an immersive and fully dynamic user experience, where each battle is unique thanks to procedural roast generation.
From a technical perspective, the system uses Gemini flash-lite, a lightweight and fast language model, to generate roasts without predefined templates. Low latency is key to maintaining battle rhythm, as responses must arrive within seconds. The prompt is built dynamically, instructing the model to act as a specific character and generate an aggressive, funny insult in one or two sentences. A system instruction forces plain text output without quotes, emojis, or formatting marks, avoiding processing chain errors.
ElevenLabs then transforms those texts into distinct character voices. Each fighter has a unique voice ID: one deep and aggressive for the first, another British and theatrical for the second. Synthesis uses the eleven_v3 model, offering high fidelity and naturalness. Audio is obtained in MP3 format and decoded directly into the Web Audio API, creating a buffer connected to an analyzer node. This node extracts the frequency spectrum in real time, providing bass intensity data (bins 0-19) used to modulate the visual shader.
Visual rendering runs exclusively on the GPU via a custom GLSL fragment shader. The geometry is a full-viewport plane, on which multi-octave noise generates an organic liquid wave. The wave height is modulated by each fighter's voice volume: when the left fighter speaks, the wave rises on that side with a sky blue color, while the right fighter tints the opposite side pink. Colors blend smoothly in the center with a violet hue. Linear interpolation (lerp) on volume values prevents abrupt jumps between frames, achieving fluid, natural movement that mimics breathing.
The asynchronous playback queue is another key architectural element. While the current roast plays, the system continues generating subsequent ones in the background, hiding external API latency. This is achieved with a producer-consumer pattern: the generateBattle() function pushes roasts to a queue, and a worker plays them sequentially. The user never experiences pauses between turns, essential for maintaining immersion in a real-time battle.
Beyond entertainment, Fandom Fire illustrates the potential of AI-based applications to create personalized interactive experiences. In the business world, similar architectures can be used to generate dynamic content for marketing campaigns, virtual assistants with realistic voices, gamified training systems, or even dialogue generation tools for video games. Integrating multiple AI models in a single flow, combined with GPU acceleration and real-time audio analysis, opens new possibilities for custom software development.
Q2BSTUDIO, as a software development and technology company, has the capability to build similar solutions tailored to each client's needs. Experience with cloud services on AWS and Azure allows scaling these systems to support thousands of concurrent users, ensuring low latency and high availability. Additionally, the cybersecurity practices Q2BSTUDIO implements in every project guarantee the protection of sensitive data, such as API keys, and the integrity of communications between the frontend and external services.
Security is a critical aspect in applications that consume external APIs. Fandom Fire sends prompts to Gemini and voice requests to ElevenLabs, requiring secure API key management. Q2BSTUDIO integrates cybersecurity protocols throughout all development phases, from communication encryption to input validation, protecting both the user and the underlying cloud infrastructure. This is especially relevant when deploying applications in corporate environments where data confidentiality is a priority.
Another relevant component is data analysis. While Fandom Fire focuses on the immediate experience, a similar system could include Business Intelligence modules, such as Power BI, to visualize battle statistics: most effective roasts, response time, character popularity, or usage patterns. Q2BSTUDIO helps companies implement BI dashboards that transform data generated by such applications into strategic information, enabling data-driven decisions. The ability to integrate AI agents, such as the language models that write roasts, can also be applied to automate customer service responses or generate personalized content at scale.
AI agents are a growing trend in software development. Fandom Fire uses two agents —one for text generation and another for voice synthesis— coordinated in real time. This pattern can be extrapolated to other domains: for example, an agent that analyzes customer sentiment and another that generates an empathetic response, all orchestrated from the frontend. Q2BSTUDIO has experience implementing multi-agent architectures, using generative AI to create autonomous workflows that improve operational efficiency.
In conclusion, Fandom Fire is not just an interesting demo project but an example of how combining artificial intelligence, GPU rendering, and real-time audio can yield innovative digital products. Its lightweight architecture and focus on immediacy are ideal for inspiring developments in sectors such as entertainment, education, and corporate communication. Q2BSTUDIO offers the technical knowledge and experience needed to take these ideas from prototype to production, integrating cloud, AI, cybersecurity, and BI into custom solutions. For companies looking to create similar applications or explore the potential of generative AI, having a technology partner like Q2BSTUDIO is the first step toward real innovation.
