I coded an Air Hockey game where a local SLM hacks the DOM to cheat (and trash-talks you) 🤖🏓

Have you ever played a game where the AI realizes it's losing, gets angry, and literally inverts your mouse controls in the DOM?*

After having a blast creating ), I wanted to push my experiments a little further. As a Web Architect with 15 years of experience and founder of

But under the hood, your opponent ("Neural Core") does much more than just hit the puck back: it analyzes your physical habits, trash-talks you live, and triggers physical "cheats" in the game engine out of pure bad faith.

Here is how I built this using WebGPU, WebLLM, Brain.js, and Supabase, and why plugging a SLM directly into a physics engine is a very bad idea.

🛑 The Bottleneck: Why SLMs can't "play"

My initial naive idea was: "What if the SLM directly controlled the X and Y coordinates of the paddle?"

I quickly realized that Air Hockey physics rely on a requestAnimationFrame running at ~16 milliseconds per frame. SLMs are auto-regressive generative engines. Even running a highly optimized model like Phi-3-mini locally via WebGPU, generating a decision takes several hundred milliseconds. If the game loop waited for the SLM at every frame, the game would run at 0.5 FPS.

The Solution: The SLM cannot handle physics in real time (yet). It must be relegated to the asynchronous role of a "Game Master". But I still needed an opponent capable of learning and anticipating physical movements.

This is where I had to split the AI into Two Brains. The game's physics engine handles bouncing the puck deterministically. Above it, the first brain (Brain.js) modifies the AI paddle's vectors to anticipate the puck, while the second brain (the SLM) watches the match asynchronously to orchestrate the narrative and trigger events.

🧠 Brain #1: The Physics Profiler (Brain.js)

To give the AI the ability to adapt to the player's habits without blocking the main thread, I used to load Phi-3-mini-4k-instruct directly into the user's VRAM via WebGPU. Zero API costs. Zero server latency. Total privacy.

Brain.js transmits its findings (e.g., "The player frequently shoots HIGH") as context to the SLM. But the real magic lies in the Function Calling via Regex. Since we are in the browser, the SLM can literally manipulate the DOM and the game state to trigger Mario Kart-style power-ups.

💡 The UX Hack (Sliding Context Window):

A common mistake in local AI games is wiping the LLM's context on "Game Over". In Ping Prompt, when you hit "Rematch", the chatHistory array is not cleared. It maintains a 15-message sliding window. This means the AI remembers how the last game ended, and it will actively mock you for wanting to play again after a crushing defeat! It transforms isolated matches into a continuous narrative rivalry.

💼 The Business Perspective: Why Hybrid AI Makes Sense

From an engineering standpoint, WebLLM is a fascinating feat. From a business perspective, it's a massive cost-saver.

A common concern for clients wanting to deploy interactive Generative AI is the unpredictability of Cloud API costs, especially for a public-facing web campaign.

By adopting a Hybrid Strategy, we can drastically reduce those costs:

1. 
   Local-First (WebGPU): Players with compatible hardware (approx. 30% of modern traffic) run the SLM on their own machine. Cost: $0.00.


2. 
   Cloud Fallback (1:1 Parity): For mobile users or older PCs, the game gracefully falls back to a Serverless Cloud API hosting the exact same model (Phi-3-mini-4k-instruct) via providers like Azure, DeepInfra or OpenRouter. The market rate for hosting this SLM is around $0.10 per 1 Million tokens.

Because the game's architecture is ultra-frugal—requesting only ~350 input tokens per event, roughly 15 times per match—a full game consumes less than 6,000 tokens total.

Even for the 70% of players triggering the Cloud Fallback, running 10,000 matches (which equals roughly 42 Million tokens) would cost the company less than $5.00 in API fees.

Maximum resilience, perfect behavioral parity between Web and Cloud, and near-zero infrastructure costs. That's the real power of Sovereign AI.

🚀 Conclusion

We are still far from the day when SLMs will control physics frame-by-frame.

However, this project proves that by blending the rigor of classic Web engineering (Canvas, Web Audio, custom physics engines) with the innovation of embedded AI, we can create powerful and sovereign experiences without any cloud dependencies.

Delegating fast and deterministic tasks to lightweight neural networks (like Brain.js), and using local SLMs (via WebGPU) as asynchronous "Game Masters" capable of manipulating game state via text-parsing, paves the way for an entirely new genre of 4th-wall-breaking gameplay.

Have you ever experimented with plugging local SLMs into real-time front-end applications? How do you handle the latency gap? Let me know in the comments!

(If you manage to beat Neural Core and make it onto the Leaderboard, post a screenshot below. Good luck.)

Proudly developed in Beauce, Québec 🇨🇦. Interested in the alliance between immersive web engineering and local AI sovereignty? Let's connect via Vibrisse Studio!