A playful 3D office that turns multi-agent orchestration — task handoffs, revisions and human approvals — into something you can understand just by watching.
AI SystemsSpatial UXThree.jsInteraction DesignAgent Orchestration
✦ 5 bot stickers are hidden on this page. Can you find the whole crew?
Watch your AI team workBots react when work arrivesTasks ride the railwayRevisions roll backwardThe world waits for youWatch your AI team workBots react when work arrivesTasks ride the railwayRevisions roll backwardThe world waits for youWatch your AI team workBots react when work arrivesTasks ride the railwayRevisions roll backwardThe world waits for youWatch your AI team workBots react when work arrivesTasks ride the railwayRevisions roll backwardThe world waits for you
Project TeamBot HQTimeline Sep 8 – Oct 3, 2026Part of TeamBot · Dashboard · Agent Canvas · HQBuilt with Three.js
A normal agent dashboard tells you “Research — Complete.” Technically true. But it doesn't tell you what Research made, where it went, or why something came back.
As agents get more autonomous, seeing what's going on matters more, not less. I wanted TeamBot to feel less like watching background processes and more like supervising a creative team. Flip the view and see the difference.
Who's doing what?Why is this agent active?What did it get?What did it make?Where does it go next?Why did it come back?When do I step in?
1.2 · What already existed
Two ways to see TeamBot. I wanted a third.
TeamBot already had a Dashboard for running the work and an Agent Canvas for understanding the wiring. Neither one showed what it feels like when the team is actually working.
Operational view
Dashboard
What is happening?
Missions, status, approvals and progress — managed directly.
Orchestration view
Agent Canvas
How is it connected?
Agents, dependencies, decisions and handoffs as one system.
NEWSpatial view
TeamBot HQ
What does it feel like?
The same agents and workflow — as a living office you can watch.
02 The idea
Q2 · What design idea did I create?
What if you could actually watch an AI team work?
I turned my agent system into a tiny creative office. Each bot has a role, a desk and a personality. Missions walk in the door, tasks ride between departments, and when a human call is needed — the whole place stops and waits for you.
It's not just a 3D office. It's a spatial interface for agent orchestration.
2.2 · The design principle
One rule became the whole visual language.
Instead of adding more dashboards, I turned system state into space and motion. Six translations do most of the work. Scroll through them — each one starts as what the agent system actually says, then turns into what HQ shows. Flip any of them back.
HQ wasn’t where TeamBot started. It started as forms, logs and JSON, and each iteration moved one step closer to showing the team instead of describing it. Dates and quotes come from my project notes and commits at the time.
Sep 8 – 11 · Stages 1–4
It worked. It just didn’t show anything.
The first TeamBot was functional scaffolding: a private conversation with Lead, a list of runs and an audit log. By Stage 3 a team of agents could run a whole (mock) campaign — and the page reported it as plain text: “research-agent: growth-research — completed”.
Functional acceptance scaffolding rather than an Agent Canvas … Every block currently receives equal visual weight.
My Stage 5A interface audit · Sep 11
Next decision Build a real team workspace — but keep it quiet: “avatars are identifiers and status affordances, not decoration” and “Animation: absent by default.”
Stage 1 · “Work with Lead.”Sep 8
Stage 3 · agent progress as textSep 9
Sep 28 – 30 · Team Room, Agent Canvas, Studio
Characters arrive — as status, not decoration.
The bots joined the product as identifiers: a team roster, an Agent Canvas of character cards, a Control Room for keyboard triage and a Studio home built around “What do you want to create?”. The rule for every view was honesty.
No invented states. Unknown values are hidden, never shown as zero.
Studio redesign plan · Sep 30
Decision Defer the animated office. “Decide on the real-provider milestone before completing cosmetic work so the product does not end as a polished mock demo.” — next build plan, Sep 28
Project overview with the team roster and Ask teamSep 30
Oct 3 · morning · Character lab
A little depth, a lot of character.
The next step happened outside the product, in a character lab. Instead of remodelling the bots as full 3D characters, each one became a shallow 2.5D relief built from its original illustration, with a small language of readable micro-states.
Shallow illustrated characters, not full 360° models or GLB files.
Character pack README · v1.2
Trade-off The illustration survives intact, but the camera has to stay within about ±12° — no backs, no rigs. Measured in the lab: one bot at 60.3 fps, ten copies of a shared asset at 60.1 fps (desktop, synthetic load). In v1.2, Sleeping and Paused were removed: idle bots stay awake.
Character lab · Designer Bot waiting for youOct 3
Oct 3 · HQ, first layouts
Floating island → walled office.
The first HQ was a floating island with whimsical zones. The next layout became a cutaway office — a dollhouse on a display plinth — and every room was renamed after the job done inside it.
70% playful office, 30% bot world … the near wall fades like a real dollhouse, so it never hides a department.
Team Bot HQ notes & README
First layout · floating island08:34
Cutaway office09:05
Oct 3 · V1, then Live mode
Depth, hierarchy — then a feature lock.
A final depth-and-hierarchy pass and an entrance sequence, then a deliberate stop. After the lock, HQ moved into its own standalone site, gained cutaway side walls and a Live project mode that mirrors a real TeamBot project.
Feature lock: Team Bot HQ V1 is feature-complete.
Team Bot HQ notes
Constraint Depth without extra cost: “baked gradient decals (no extra lights or shadow maps)”.
V1 · mission completeOct 3
What stayed constant: honest state — mock work labelled as mock, unknown values hidden. What changed: how much of the team you can see at a glance.
04 Characters
Q3 · How did I iterate and build it?
Team members, not mascots.
Every bot has its own identity — not five recolors of the same agent. Tap one to open its ID card, the same card you'd see in HQ. The bot stays recognizable across the Dashboard, the Canvas and HQ.
4.2 · Micro-states
Tiny states, big personality.
No expensive humanoid animation. Just a small language of micro-states that anyone can read. These are the real 2.5D office characters — pick a bot, try each state, and drag to look around.
My Yuya Film Studio is cinematic and moody. TeamBot needed a totally different personality — bright department colors, rounded architecture, toy-like proportions and lots of little details.
First“These bots are adorable.”
Then“Wait, they have their own office?”
Finally“…they're actually working.”
The front door — “Your AI team is ready.”Entrance
5.2 · The task railway
Handoffs you can actually see.
Instead of a status silently flipping from “Complete” to “Working,” the work physically travels. A Research Pack leaves the lab, rides the railway, Content spots it coming and gets to work. Run the mission — then try a revision.
Everyone's idle. Send a mission in.
Revisions travel backward
When Reviewer says REVISE, the task doesn't vanish and magically reappear. The cart reverses. The direction of movement is the feedback loop.
Reviewer: “Revise — logo too small in frame 3.”Review Bay
5.3 · Workspaces
No two desks are the same.
Each environment shows the bot's specialty, so you can tell what's happening even from across the office.
Design Studio — mixing the palette & key framesTB / 004
Idea Studio — growing hooks & the 30s scriptTB / 003
5.4 · The camera
A camera built for watching a team.
I skipped WASD on purpose. HQ uses a constrained dollhouse camera so several bots stay visible at once — because this project is about collaboration, not exploration. Try it: drag to pan, zoom, or tap a bot to focus.
Drag to orbitPan aroundScroll to zoomClick a bot to focusClick a departmentBack to overview
OverviewMission VOLT · Content is working
06 Human in the loop
Q3 · How did I iterate and build it?
Autonomy doesn't mean removing you.
When Reviewer hits a call that needs judgment, the whole workflow stops and waits for you — inside the same visible flow, not as a pop-up interruption. When you reach the package, the page waits with it. It's your turn: inspect the work and decide.
Your call.
⏳ WAITING FOR YOU
The final package is ready
Reviewer Bot · Review Bay · VOLT 30s launch ad
4 bots paused · waiting on you00:00
RESEARCH PACK
Gen Z picks energy drinks on taste and vibe, not caffeine numbers
Rivals all shout “extreme” — calm energy is wide open
Citrus is the fastest-growing flavour
HOOK
“Energy that doesn't yell.”
KEY FRAMES
Your choice replays the flow right here.
APPROVED
Mission VOLT · live routeWaiting at Review
The real thing — Reviewer waits, the world pauses.Review Bay
07 Outcome
Q4 · What did that teach me about AI-native interfaces?
One agent system. Three interfaces.
TeamBot HQ didn’t replace the Dashboard or the Agent Canvas. It became the third way of looking at the same agents, tasks and handoffs. Not every complex system needs one universal interface — sometimes the same system is easier to understand from a few different angles.
One underlying systemTeamBot agentsagents · tasks · handoffs · approvals
Operational view
Dashboard
What is happening?
Manage the team: missions, results, approvals and who’s ready.
Orchestration view
Agent Canvas
How is it connected?
Understand orchestration: every agent, its saved work status and its private conversation.
Spatial view
TeamBot HQ
What does it feel like?
Watch the team work: handoffs, revisions and approvals as movement.
7.2 · The same moment
One handoff, three ways to see it.
MomentResearch hands the Research Pack to Content
DashboardResearch · Complete / Content · Running
Agent CanvasThe step appears on the canvas; each character card reflects its agent’s saved work status.
TeamBot HQThe pack rides the railway into the Idea Studio, and Content reacts the moment it lands.
7.3 · Watching vs. controlling
Interesting even when you do nothing.
Bots idle and glance around. Tasks arrive. Workstations light up. Bots glance at each other during handoffs. You can step in whenever you want — but the system makes sense just by watching. HQ runs in two modes.
Demo mission Live project
Demo Mission
A replayable story that explains TeamBot with zero setup: mission enters → Lead plans → Research → Content → Design → Review → maybe a revision → your approval → Delivery. Pause it, replay it, speed it up — or put it on autopilot.
Onboarding · portfolio · recording
Live Project
HQ mirrors a real TeamBot project. The characters and workspaces reflect real agent activity — so it's never a disconnected animated toy. It's another view of the same system.
Real agents · real tasks
7.4 · Demo mission
Watch one mission, end to end.
The demo mission — VOLT, a 30-second launch ad — goes from plan to research, script, frames, review, your approval and delivery.
Lots of characters, see-through layers, animated desks, carts, labels and shadows all fight for the same frame budget. The goal wasn’t to make the world simpler — it was to make it cheaper to run while keeping its charm.
Ten copies added nine draw calls and held 60 fps. The test’s own caveat: a synthetic same-artwork desktop load — not a full-office or mobile benchmark.
Built to a budget
20,000-triangle relief per botPixel ratio capped at 1–1.75One 2048² shadow mapInstanced meshesLazy-loaded scene moduleBaked gradient decals instead of extra lightsConstrained cameraState-driven workspace motionLimited continuous animation
08 What I learned
Q4 · What did that teach me about AI-native interfaces?
Orchestration can be spatial.
The most interesting outcome wasn’t the 3D office. It was how much of a multi-agent architecture can be explained by watching instead of reading. My design goal was that a non-technical visitor could understand the system in about thirty seconds — that’s a goal, not a tested result yet, and it’s the next thing to prove with real people.
A statusbecomes behavior.
A dependencybecomes a route.
A handoffbecomes movement.
A revisionmoves backward.
Human approvalstops the world.
Four principles for AI-native interfaces
01Show state. Never invent it.
Every view follows the same rule: no invented states, unknown values hidden rather than shown as zero. HQ is a projection — it never writes runtime state.
02One system, several honest views.
Managing, understanding and watching are different jobs. Dashboard, Agent Canvas and HQ each answer one question about the same agents.
03Keep the human decision inside the flow.
Approval isn’t a pop-up. The workflow visibly stops at Reviewer and waits — and nothing in HQ can approve on your behalf.
04Make it real, then make it delightful.
I deliberately deferred the animated office while the real system came together, so the delight sits on top of real behaviour instead of a polished mock.
What should interfaces look like when software isn't a set of tools anymore — but a team of autonomous actors?
TeamBot HQ is one answer I'm exploring.
Dashboard: manage the workAgent Canvas: understand the systemHQ: watch the team workDashboard: manage the workAgent Canvas: understand the systemHQ: watch the team workDashboard: manage the workAgent Canvas: understand the systemHQ: watch the team workDashboard: manage the workAgent Canvas: understand the systemHQ: watch the team work
Case study / Quick answers
TeamBot HQ, explained.
What is TeamBot HQ?
TeamBot HQ is a spatial interface for TeamBot: a playful 3D office that turns multi-agent orchestration into visible task handoffs, revisions and human approval points.
How does TeamBot HQ show agent collaboration?
Five specialist bots represent Lead, Research, Content, Design and Review. Task packages travel between departments on a railway; revisions move backward and delivery waits for human approval.
Does TeamBot HQ control the agents?
HQ is a projection of system state. Demo mode illustrates a mission; Live mode mirrors a real TeamBot project. HQ does not write runtime state or approve work on the user’s behalf.
What has been validated?
The character lab measured 60.3 fps for one bot and 60.1 fps for ten copies of one shared asset on desktop Chromium. These are synthetic character tests, not full-office or mobile benchmarks. Understanding the system in thirty seconds remains a design goal awaiting user testing.
Don't just tell me my agents are working.Let me watch the team work.
DING!
‹‹‹REVISEIdea StudioReview Bay
