Orchestration

Coordinated animations with staggered children and variants. Foundation for multi-node updates.

Staggered List

Children animate in sequence with configurable delays.

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.2,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
};

<motion.div variants={containerVariants} initial="hidden" animate="visible">
  {items.map(item => (
    <motion.div variants={itemVariants}>{item}</motion.div>
  ))}
</motion.div>

State Variants

Define named animation states and switch between them.

⏸️

const variants = {
  idle: { scale: 1, backgroundColor: 'gray' },
  loading: {
    scale: [1, 1.05, 1],
    transition: { repeat: Infinity }
  },
  success: { backgroundColor: 'green' },
  error: { x: [0, -10, 10, -10, 10, 0] }
};

<motion.div variants={variants} animate={state} />

Propagating Variants

Variants automatically propagate to children. Perfect for menus and panels.

1.Dashboard

2.Agents

3.Tokens

4.Settings

const menuVariants = {
  closed: {
    transition: {
      staggerChildren: 0.05,
      staggerDirection: -1, // Reverse order on close
      when: 'afterChildren',
    },
  },
  open: {
    transition: {
      staggerChildren: 0.1,
      when: 'beforeChildren',
    },
  },
};

// Children automatically use parent's variant name
<motion.div variants={menuVariants} animate={isOpen ? 'open' : 'closed'}>
  {items.map(item => (
    <motion.div variants={itemVariants}>{item}</motion.div>
  ))}
</motion.div>

Orchestration Timeline

Step through coordinated animation phases. Pattern for workflow visualizations.

🤖

Phase 1: Initialize

const phases = [
  { label: 'Initialize', nodes: [1] },
  { label: 'Spawn Agents', nodes: [1, 2, 3] },
  { label: 'Connect', nodes: [1, 2, 3], connected: true },
  { label: 'Execute', nodes: [1, 2, 3], active: true },
  { label: 'Complete', nodes: [1, 2, 3], complete: true },
];

// Render based on current phase state

Agent Flow Visualization

Preview for AI agent orchestration diagrams. This pattern will power the AID (Agent & Instrument Diagrams) in the drawing tool.

🎭

🔍

⚡

✅

Orchestrator

Analyzer

Executor

Validator

// AID (Agent & Instrument Diagram) Pattern
const agents = [
  { id: 'orchestrator', emoji: '🎭', label: 'Orchestrator' },
  { id: 'analyzer', emoji: '🔍', label: 'Analyzer' },
  { id: 'executor', emoji: '⚡', label: 'Executor' },
];

const connections = [
  { from: 'orchestrator', to: 'analyzer' },
  { from: 'analyzer', to: 'executor' },
];

// Animate flow with strokeDashoffset
animate={{ strokeDashoffset: [0, -16] }}
transition={{ repeat: Infinity, ease: 'linear' }}