Designing a Breathing AI Indicator for Roam’s Virtual Office

April 15, 2026

We added a soft, living glow to Roam’s virtual office map so you can instantly tell when someone is vibing with Claude or Codex. The map is core to the Roam experience — you can glance and see who’s around, who’s in a meeting, who’s listening to music, or who’s deep in a DND session and doesn’t want to be interrupted. No scheduled meetings (for me at least), just natural drop-ins. As everyone started using AI more and more, we wanted a nice visual cue that felt alive but never got in the way.

My setup is pretty simple: I run Claude in Ghostty terminal right above my browser, with a quick Vite + React project underneath. It lets me tweak the code and instantly see the glow come to life on the map — super fast iteration, prompting away until I get the effect that I like. The glow sits around each room card like a soft halo around the edges. We used the real brand colors — Claude’s warm orange and Codex’s saturated blue — and turned them into a rotating gradient that slowly sweeps around the card, giving it that gentle pulsing effect. It fades in and out smoothly, and the more intense the AI work feels, the brighter and livelier the glow gets.

To make it look rich and glowy instead of flat, we layered three versions of the same glow: a soft wide outer haze, a medium body, and a crisp inner edge. Everything stays neatly clipped to the shape of the room so it never spills into the middle. When someone’s using both Claude and Codex at the same time, we just stack the two glows on top of each other — they naturally mix into a pretty purple overlap without any extra tricks.

I barely touched Figma at the start because iterating live in the browser felt way better for this one. Usually we go back and forth a lot with Claude and the Figma MCP for product work, and some features even get prototyped with Claude and Paper. But for this glow, being able to see it move and breathe right on the actual map made tweaking so much more intuitive. Once it clicked, we handed it over to engineering, added little Claude and Codex combo badges in the corner, and fine-tuned the animations. In the end, it makes the whole map feel a little more alive. It’s pretty cool watching AI happen in real time across the team — something that is unique to a Roam Virtual Office.