Tusk Retro Animations

Step-through animated flow diagrams for the Tusk retrospective.

Run

npm install
npm run dev   # http://localhost:6543

How it works

• Each animation is a flow definition file in src/flows/. The renderer is generic.
• Steps reveal nodes/edges progressively. Press → to advance. Press e to expand the currently-focused node into a higher-fidelity sub-flow.
• Routes:
  • / — hub
  • /old-tusk
  • /tusk-tester/deterministic
  • /tusk-tester/agentic
  • /tusk-review/commit-check
  • /tusk-drift/commit-check
  • /tusk-drift/test-suite-curation

Editing a flow

Open src/flows/<flow>.js. Each flow is one object:

export default {
  title, subtitle, layout,        // "TB" or "LR"
  nodes:  [{ id, kind, label, sublabel, icon }, ...],
  edges:  [{ source, target, label }, ...],
  steps:  [{ title, callout, tag, code, reveal: ["nodeId", "edgeId"] }, ...],
  expansions: { nodeId: { entryTo, exitFrom, nodes, edges } },
};

• Reorder a step — move the object in steps.
• Add a step — push a new object; reference any node/edge ids in reveal.
• Add a node — push to nodes, reference its id in a step's reveal.
• Edge id — defaults to ${source}->${target}.
• Expand a node — register an entry in expansions. The node becomes clickable / e-expandable.

Keyboard

key	action
→ / space	next step
←	previous step
r	reset to start
f	fit view
e	toggle expansion on focused node
scroll	zoom
drag	pan