# DataFlow Animator

> Compiles a JSON specification into a deterministic, scrubbable animation of
> data flows (client/server exchanges, protocols, algorithms on trees and
> graphs, electrical and logic circuits), played in a media player with steps,
> a timeline, a text transcript and video export.

To author an animation, read the authoring guide, then the field reference;
start from the closest example. A spec opens in the playground by pasting it,
or through a link `https://pierreolivierbrillant.github.io/dataflow-animator/playground/#spec=<token>` where the token is the
minified JSON, raw-DEFLATE-compressed, base64url-encoded.

## Authoring

- [Authoring guide](https://pierreolivierbrillant.github.io/dataflow-animator/claude/guide.md): the model, the layouts, the actions, and the mistakes to avoid
- [Field reference](https://pierreolivierbrillant.github.io/dataflow-animator/claude/types.md): every field of the spec, generated from the JSON Schema
- [Component terminals](https://pierreolivierbrillant.github.io/dataflow-animator/claude/pins.md): the `"node:pin"` names of every circuit symbol
- [JSON Schema](https://pierreolivierbrillant.github.io/dataflow-animator/schema.json): the machine-checkable source of truth
- [Everything in one file](https://pierreolivierbrillant.github.io/dataflow-animator/llms-full.txt): guide, reference, terminals and seven examples

## Examples

- [Client-Server](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/clientServer.json): Client-server architecture (`left-to-right`)
- [Full-duplex real-time (SignalR)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/signalr.json): Persistent WebSocket connection: we see the client code and the hub code, then a SendAll broadcasting the message to all connected clients. (`circular`)
- [Microservices behind an Nginx proxy](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/microservices.json): Auth and Data behind Nginx, each with its database: authentication (JWT) then data request. (`left-to-right`)
- [SPA loading then API calls](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/spa.json): The web server returns HTML then JavaScript; the rendered shell waits for the data, which the Web API serves as JSON. (`left-to-right`)
- [Cryptography: Alice, Bob & Eve](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/crypto.json): Diffie-Hellman key exchange on a public channel eavesdropped by Eve: she sees the public values pass by but cannot reconstruct the shared key. (`left-to-right`)
- [TLS 1.3 handshake](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/tls.json): ClientHello / ServerHello, certificate validation, session key derivation, then switch to encrypted channel for application data. (`left-to-right`)
- [OAuth 2.0 — Authorization Code](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/oauth.json): Delegated login: redirection to the authorization server, single-use code, exchange for a token on the back channel, then API call. (`left-to-right`)
- [Denial-of-service attack (DoS)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/dos.json): A single machine floods the server with requests until it saturates; the legitimate user is then denied service. Since everything comes from one IP, the attack stays blockable. (`left-to-right`)
- [Distributed denial-of-service attack (DDoS)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/ddos.json): A command-and-control server (C&C) orders a botnet to attack: every bot floods the target simultaneously. With traffic coming from thousands of IPs, you cannot just block one address. (`left-to-right`)
- [DoS countermeasure: rate limiting](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/rateLimit.json): A reverse proxy caps requests per IP: the single-source flood is rejected with 429 at the edge, the backend stays healthy and the legitimate user keeps being served. (`left-to-right`)
- [DDoS countermeasure: scrubbing center](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/scrubbing.json): All traffic flows through a filtering edge (Cloudflare/Anycast-style) that absorbs the volumetric flood and drops the bots; only the legitimate request reaches the origin, which never sees the attack. (`left-to-right`)
- [Recursive DNS resolution](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/dns.json): The resolver queries the root, the TLD and then the authoritative server in turn before returning the IP address to the browser (and caching it). (`left-to-right`)
- [CI/CD pipeline](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/cicd.json): From git push to deployment: webhook, tests and build in the runner, publishing the image to the registry, then deploying to production. (`left-to-right`)
- [Raft consensus — leader election](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/raft.json): Circular layout: a candidate requests votes from followers, gets the majority, becomes leader then maintains authority via heartbeats. (`circular`)
- [Message queue (publish/subscribe)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/messageQueue.json): A producer publishes an event in a broker, which distributes it to multiple workers; each processes then acknowledges. (`left-to-right`)
- [CDN cache — MISS then HIT](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/cdn.json): The same resource requested twice: first call is a cache MISS (goes to origin), second is a cache HIT served immediately from the edge. (`left-to-right`)
- [Load balancer (round-robin)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/loadBalancer.json): Three successive requests distributed to different backends; the fourth loops back to the first. (`left-to-right`)
- [Kubernetes deployment](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/kubernetes.json): From kubectl apply to Running pod: the API Server persists the desired state in etcd, the scheduler picks a node, the kubelet starts the container. (`left-to-right`)
- [Online payment (3-D Secure)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/payment.json): Payment intent, bank authorization with strong authentication, then asynchronous shop confirmation via webhook. (`left-to-right`)
- [Blockchain transaction](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/blockchain.json): A signed transaction joins the mempool, multiple miners search for the nonce, one forges the block and propagates it to the network. (`left-to-right`)
- [Email routing](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/smtp.json): From Alice's client to Bob's inbox: SMTP dispatch, MX record resolution, relay between mail servers, then IMAP retrieval. (`left-to-right`)
- [Federated GraphQL gateway](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/graphql.json): A single request split by the gateway to multiple subgraphs, whose responses are recomposed into a single object. (`left-to-right`)
- [Webhook with retries (back-off)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/webhook.json): Delivery fails twice (receiver unavailable) then succeeds; the dead times between attempts materialize the exponential back-off. (`left-to-right`)
- [Circular orchestration](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/circular.json): Circular layout: a central orchestrator distributes a command to satellite services then aggregates their confirmations. (`circular`)
- [Red-black tree — recoloring](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/redBlackTree.json): Inserting a red leaf under a red parent whose uncle is also red: rebalancing is a pure recoloring (parent and uncle to black, grandparent to red), no rotation. Showcases the set_color action. (`tree`)
- [Red-black tree — rotation](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/redBlackRotation.json): The rotation case: inserting a red node under a red parent whose uncle is black. Recoloring alone is not enough — it takes a rotation then a recoloring. Combines the rotate_subtree and set_color actions. (`tree`)
- [AVL tree — rotation](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/avlTree.json): Inserting 10, 20, 30 degenerates into a right-leaning chain (balance factor −2). A single left rotation rebalances it. Showcases direction:'tree' and the rotate_subtree action (nodes glide to their new depth). (`tree`)
- [Binary tree — search](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/bstSearch.json): Searching a key in a binary search tree: a token descends from the root, compares at each node and branches left or right until it finds the value. Shows the step-by-step O(log n) descent. (`tree`)
- [Binary tree — insertion](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/bstInsert.json): Inserting a key into a binary search tree: the new key arrives as an orphan and walks down step by step, comparing at each node, until the empty slot where the node is then created. (`tree`)
- [Shortest path — Dijkstra](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/dijkstra.json): Dijkstra's algorithm on a free weighted graph (direction:'graph', nodes placed via x/y). It settles the nearest unvisited node in turn; each step recolours the node and the edge it was reached through, growing the shortest-path tree to the target. (`graph`)
- [Shortest path — A*](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/astar.json): A* on a grid (direction:'graph', nodes placed via x/y): Dijkstra guided by a heuristic h(n) = Manhattan distance still to go. It always expands the node with the smallest f = g + h, so the search heads straight for the goal without exploring the sideways cells. (`graph`)
- [Minimum spanning tree — Kruskal](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/mst.json): Kruskal's algorithm (direction:'graph'): sort the edges by weight and add the cheapest one that does not form a cycle, until all six nodes are linked by five edges. Accepted edges turn green; those that would close a cycle are skipped. (`graph`)
- [Anti-collision (parallel lanes)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/collision.json): The App ↔ DB segment is used in both directions simultaneously: the engine automatically offsets the paths into parallel lanes. (`left-to-right`)
- [Push notifications (FCM)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/pushNotifications.json): Full lifecycle of a push notification: how Alice's device registers its delivery address (the FCM token), then how a message sent by Bob is routed to her, even if her app is closed. (`left-to-right`)
- [Electrical circuit (current)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/circuit.json): A battery/switch/resistor/LED series loop on `direction: circuit`: orthogonal wires between named terminals, closing the switch (`toggle`), then animated current (`flow`) and the LED lighting up. (`circuit`)
- [Parallel circuit (two LEDs)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/circuitParallel.json): Two LEDs in parallel on `direction: circuit`: the current (`flow`) splits at the junction, feeds both branches at once, then recombines. (`circuit`)
- [Ohm’s law (voltage, current, power)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/ohmsLaw.json): Explains the difference between voltage (potential difference, across), current (amperage, through), resistance and power (V·I) on a series circuit with an ammeter and a voltmeter. (`circuit`)
- [Logic gates](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/logicGates.json): The six core logic gates (AND, OR, XOR, NAND, NOR, NOT), fed the same inputs, with each one’s rule and output. (`circuit`)
- [Half-adder (wired gates)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/halfAdder.json): A complete digital diagram: two bits A and B added by a XOR (sum) and an AND (carry), stepping through all four combinations. (`circuit`)
- [Half-adder (NAND gates)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/halfAdderNand.json): The half-adder rebuilt from NAND gates alone (the "universal" gate): five NANDs reproduce the XOR (sum) and AND (carry). (`circuit`)
- [Half-subtractor (NAND gates)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/halfSubtractorNand.json): The half-subtractor (A − B) from NAND gates alone: five gates give the difference (XOR) and the borrow (A′·B), mirroring the half-adder. (`circuit`)
- [Full adder (NAND gates)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/fullAdderNand.json): The full adder (A + B + carry) from nine NAND gates: two XORs for the sum, the carry reusing their inner terms. The cell of every adder. (`circuit`)
- [Full subtractor (NAND gates)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/fullSubtractorNand.json): The full subtractor (A − B − borrow) from eleven NAND gates: a double XOR for the difference, the borrow reusing the XOR’s inner terms. (`circuit`)
- [SR latch (NAND gates)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/srLatch.json): Two cross-coupled NAND gates form a latch — one bit of memory. Active-low inputs stepping through set, reset and hold (the memory). (`circuit`)
- [CMOS NAND gate (4 transistors)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/cmosNand.json): What is INSIDE a NAND gate: two pMOS in parallel above, two nMOS in series below. The conducting transistors light up for each input combination. (`circuit`)
- [Multiplexer 4:1 (generic block)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/mux4to1.json): Four inputs, two select bits, one output — a block whose terminals are declared in the spec rather than one symbol per size. (`circuit`)
- [RC circuit (charging)](https://pierreolivierbrillant.github.io/dataflow-animator/claude/examples/rcCircuit.json): A resistor charges a capacitor: the transient response, the time constant τ = R·C, the exponential voltage rise, and the current stopping once charged. (`circuit`)

## Tools

- [Claude skill](https://pierreolivierbrillant.github.io/dataflow-animator/claude/dataflow-animator-skill.zip): upload to claude.ai (Settings → Capabilities → Skills) or unzip into `~/.claude/skills/`
- [Playground](https://pierreolivierbrillant.github.io/dataflow-animator/playground/): live editor and player

## Optional

- [Documentation](https://pierreolivierbrillant.github.io/dataflow-animator/docs/intro/): the human-facing docs
- [Generating with Claude](https://pierreolivierbrillant.github.io/dataflow-animator/docs/claude/): how the skill, the prompt and these files fit together