Multi-Agent Handoff
A pip crosses the connector, the receiving card lifts as it takes the work, and the finished one recedes with a drawn check.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Multi-Agent Handoff
*
* Work travelling down a chain of named agents: the connector fills, a
* pip crosses it, the receiving card lifts as it takes over, and the oneAbout this pattern
An orchestrated run is easy to mistake for one long wait, because nothing on screen says which part of the system is currently responsible. This makes custody visible: the connector fills, a pip crosses it, and the receiving card lifts only once the pip arrives — the lift acknowledges the transfer instead of racing it. The agent that just finished recedes rather than disappearing, keeping the whole chain readable, and a single status line changes wording underneath without ever moving. Nothing bounces: a card that springs on arrival reads as a notification, not as work changing hands.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
A chain run rendered as named stages, with the currently executing one distinguished from the finished ones.
Related patterns
- Progressive Image GenerationA generated picture resolves from blur to sharp across a few discrete refinement passes.
- AI Result RevealThe result card rises into place while its confidence value counts up to the final number.
- Embedding Cluster SettleScattered points drift into labelled groups, the halos and captions landing after them.