Packet Dot Flow
DiagramsRequests stream along the top in accent and return underneath in muted, with per-hop latency labels and a loop that closes exactly
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
What you can change · 5 settings
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
- Nodes *nodes · array
Service names, left to right. The request travels along the top and returns underneath.
now: 4 items
- Latencies *latencies · array
One label per hop, e.g. '2ms'. Rendered on the outbound leg.
now: 3 items
- Packetspackets · number
Dots in flight at once. More reads as throughput, fewer as a single trace.
now: 5
- Lapslaps · number
Whole round trips across the shot. Integers only, or the loop will not close.
now: 2
- Brandbrand · string
Brand token id, one of the keys of BRANDS.
now: slate
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
Data flowing between services: dots travelling right along a top rail and returning left along a bottom rail in a muted colour, with latency labels on each hop, looping seamlessly.
