pro209 lines · framer-motion

Swarm Map

Who is talking to whom, right now. An orchestrator in the middle, agents around it, and message packets flying along the links: tasks out, results back, and orange ones when an agent needs a human.

Use it for: Multi-agent systems, crew and swarm frameworks, demos.
Themes: Light + dark
License: Commercial use (draft)

Live

taskresultneeds a humanClick an agent

tsx

"use client";

import * as React from "react";
import { useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

export interface SwarmAgent {
  id: string;
  name: string;
  role: string;
}

export interface SwarmMapProps {
  agents?: SwarmAgent[];
  /** Number of agents to show from the list (2–10). */
  count?: number;
  /** Messages per second across the swarm. */
  rate?: number;
  showLabels?: boolean;
  /** Also draw peer-to-peer links between neighbours. */
  mesh?: boolean;
  className?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Agents sit on an ellipse around a black orchestrator disc that shows packets in flight.
→Packets ease along links: blue task, green result, larger orange ask-a-human.
→Optional dashed mesh links between neighbours carry peer messages.
→An agent's status dot flashes green when a packet arrives. Click an agent to highlight its link.

Accessibility

✓SVG has role=img with a summary label.
✓Agents are focusable buttons with name and role.
✓Packets stop under reduced motion.
✓Honours prefers-reduced-motion.