Routing Flow Diagram

Overview

Stage boxes in: requests, router node, model column. Grow connector arrows. Crossfade the output column through states, then exit.

Build

1. 01

   Left request boxes slide in.

2. 02

   Arrows grow width in steps.

3. 03

   Router node appears.

4. 04

   Output boxes cycle color/state.

5. 05

   Column exits upward.

.arrow { animation: grow-w 400ms both }
.out { animation: state-a, state-b, state-c }