The X Algorithm, Visualized
Table of Contents
I built an interactive RPG-style simulation of X’s “For You” recommendation algorithm. You pick a persona, write a tweet, configure your audience, and watch how the algorithm decides whether your post goes viral or dies in obscurity. It’s effectively a role-playing game for understanding how X’s feed works, and it runs a real sentence transformer in the browser to do it. Every number on screen is computed from actual embeddings and cosine similarity. No mock data, no canned animations.
Try the live demo | Watch the demo video
Why real inference?
I had to decide early on whether to animate placeholder data or run actual ML client-side. I went with real inference, loading MiniLM into a Web Worker using @xenova/transformers. The Web Worker is key here: all the ML computation happens off the main thread, so the UI stays responsive while embeddings and similarity scores are being calculated. Without it, the browser would freeze every time you typed a tweet.
Fake demos feel fake. If you’re trying to help someone understand how a recommendation algorithm works, made-up numbers moving around a screen teach nothing. Watching your own input get tokenized, embedded, and compared against candidate posts with real cosine similarity is a completely different experience.
What you see
The simulation walks through the stages that mirror the real X pipeline: request handling, candidate gathering, filtering, scoring, diversity ranking, and delivery.
You pick a persona, adjust audience sliders, and write or select a tweet. Then you watch it flow through the system. Posts get filtered out and you see why. Engagement predictions shift as you change the audience mix. The scoring model weights different signals and you see the math. At the end, you get RPG-style stats for your tweet: reach, resonance, momentum, and a percentile ranking.
One trick worth mentioning: I used Matryoshka embeddings to truncate the full embedding vectors down to a fraction of their original size for similarity comparisons. This makes the matrix multiplications significantly cheaper, which matters for lighter devices. In practice, the model loading is probably the actual bottleneck rather than the similarity math, but it’s a nice technique to have in your toolkit for browser-based ML.
The CRT aesthetic
The whole thing is styled like an old CRT terminal: scanlines, chromatic aberration, phosphor glow, noise, bloom, vignette. Multiple layered CSS effects composited on top of each other.
This isn’t cosmetic. The framing changes how people engage with the content. You’re inspecting something normally hidden, poking at internals you’re not supposed to see. People lean in instead of skimming.
AI-assisted development
This was built with heavy AI assistance across Gemini, Claude, and Codex. The AI tools wrote a lot of the boilerplate and helped iterate on the CRT effects quickly. The architecture, the ML pipeline design, and the choice to run real inference: those were mine.
What I took away from this
Running a sentence transformer client-side with no backend and no latency opens up product possibilities I think are underexplored: educational tools, on-device personalization, privacy-preserving recommendations, interactive explainers.
The hard part isn’t the model loading or the inference. It’s designing the experience so that real computation feels immediate and the complexity doesn’t overwhelm the person using it.
If you’re working on something where ML needs to feel tangible to users, I do this kind of work.