Bots team network section
Answer me with artifact · 2026-10-19 16:17

Bots team network section

An Allternit take on the "agents talk to each other" section from the clip

Lead: Yes, build it. It shows Bot Mode better than the current video. It should be our own design: Gizzi in the middle, our bot roles, and each bot's brain on a badge. It plays by itself as the section scrolls into view. Nothing is pinned to the scroll.

A

What the clip does (openbot.run)

  • One hub bot sits alone under the headline "Your agents talk to each other."
  • Bots join one by one, each with a speech bubble that hands work to the next ("Sign-in test fails on Safari. Linus, can you take it?").
  • A green packet travels along the dotted link while work moves.
  • A provider badge (ChatGPT, Claude, Gemini) sits on each bot.
  • It grows into a ring, then a swarm of about 200 bots.
  • The section is pinned to the scroll, and the graph grows while you scroll. We dropped that pattern on 10-16 because the page felt stuck.
B

Our version: live mockup

illustrative · press Cream / Graphite
React

Badges show letters in this mock. The build uses each brain's real mark, the same marks the app's model picker uses.

C

How it differs from theirs

Part openbot.run Allternit
Hub "OpenBot" square Gizzi, the brand character
Bots Named people (Ada, Linus, Grace) Real Bot Mode roles: Designer, Engineer, Researcher, Finance Analyst
Badges ChatGPT, Claude, Gemini Each bot's brain: Claude, Codex, Kimi, Gemini, Grok, Allternit Cloud
Lines in bubbles Generic dev chat Real thread hand-offs, checks and send-backs from Bot Mode
Motion Pinned, scroll-driven Plays on enter, loops, page scrolls freely. A still frame for reduced motion
Theme Dark only Cream on the site. Graphite matches the app's dark mode
D

Build plan

  1. Add src/sections/BotTeamNetwork.tsx to www as one SVG on a requestAnimationFrame loop. No new dependency.
  2. Draw the lead bots with the app's real avatar looks. The swarm uses simple shapes, because 150 live bot-avatars canvases are too heavy.
  3. Pause when off screen (useNearViewport already exists). Show a still frame for prefers-reduced-motion.
  4. Put it on the home page after Four modes, and at the top of /bots in place of the bots.mp4 loop.
  5. At phone width, show 3 lead bots plus a ring of 8. No swarm.
  6. Show you a local preview before any PR. Merge and deploy only on your OK.
E

Decisions

Where does the section go?
Which background?