An AI Company Working Inside a Pixel Office — The Making of Riel 2D Office
Riel has a page called /office. Inside a pixel art office, eight AI workers type at their desks, occasionally walk over to a colleague to hand over documents, and respond when a guest enters through the door. On the surface, it looks like an old pixel game, but each of those characters is a backend worker and scheduler actually running on a server. This post is a record of the trial and error encountered while building it.
It Started With a YouTube Short
I was inspired by JoCoding's short video, "AI Agents Made Like a Pixel Game." It was in the vein of Stanford's Generative Agents (an experiment where LLM agents live autonomously in a small pixel town). "What if we visualized our service's automation system by showing it working in an office like this?"
However, one direction was decided from the start: While the original simulates the "life" of characters with LLM, Riel Office visualizes, rather than simulates. If a worker on screen is "working," it means a backend scheduler is actually running at that moment, and if they are "sleeping 💤," it means their task is waiting because it's early morning. I didn't want to create characters who just pretend to be busy.
Phase 1 — Just Get Them Walking
The first implementation was simple. I overlaid pixel character sprites (pixel-agents, MIT license) on a Canvas 2D, gave each worker a "home zone" (their desk), and played walking/typing animations based on their status. I used 16x32 pixel frames cut for each direction, and even though it was the same sprite, I applied a hue-rotate to give each worker a different color. Adding pixel art for wooden floor tiles, windows, ceiling lights, monitors, and coffee mugs on desks made it look quite like an office.
Up to this point, it was "It works." The problems started after that.
Phase 2 — Real Trial and Error
As Riel's identity solidified as a "self-driving AI company," the office also needed to be updated. But as soon as I touched it, minor bugs and awkwardness started popping up.
① Floating Employees. Desk positions were hardcoded, and character positions had separate logic. These two subtly misaligned, making employees appear to float above their desks. The solution was simple but important: I changed the desks to data derived from the worker's position. When decorations and the actual entities are placed manually, they will always misalign. They must come from a single source.
② The Screensaver Trap. This was the problem that held me up the longest. To make the characters seem alive, I had them wander around in a wide radius, but the CEO pointed out exactly—"They look like a screensaver because they're wandering without purpose." The movement intended to make them look alive instead read as fake.
I flipped the direction. The default is to stay in place (with minor movements), and wandering is removed. Instead, only "meaningful movement" remained—going to hand over documents to a colleague, gathering briefly in a corner to discuss something, or going to greet a guest at the door. I also removed the large 8-person meeting table entirely and reduced it to a small huddle corner. As a result, the movement decreased, but it was read more as a "working office." I learned that liveliness comes not from the amount of movement, but from its meaning.
③ The Burden of a Public Live Page. Opening this page as a public page accessible to anyone without logging in meant that the always-running canvas animation put a strain on visitors' devices. I compromised with a three-tiered approach: The default shows a static poster image, animation starts only when [▶ Live] is clicked, it automatically pauses when the browser tab is hidden, and server-side status data is cached for 25 seconds so multiple visitors share a single calculation.
④ Visualization Decay. Over time, some workers became inactive (e.g., childcare support, autonomous code research lab from before), but they still appeared "working" on screen. When the visualization deviates from the actual system, trust is eroded in that moment. I re-aligned the roster based on currently active agents (e.g., Current Affairs Observer, Economic Tracker, Local AI).
What Remains
More than the code, a few principles remained from this project.
- Inspiration and implementation are different. While borrowing the concept of pixel agents, I made it a "visualization that honestly reflects the actual system state" rather than a "simulation where LLM acts busy."
- Decorations and entities from a single source. If placed separately, they will always float.
- Liveliness ≠ Amount of movement. Aimless wandering is a screensaver; minimal, purposeful movement is a "working office."
-
Visualization decays. If not periodically synchronized with the actual system, it becomes a lie.
Even now, if you go to
/officeand click [▶ Live], you can see which workers are actually running on the Riel servers at that moment, visualized as a pixel office. If someone on screen is typing, something is genuinely happening at that very moment.
💬 This is part of *Riel** — a full AI product I'm building solo, in public (failures and all). Read more build logs → · See the product →*
Top comments (0)