Skip to content
G.

systems lab / 01

Network Workbench

Write a message, follow it across the network, and inspect what each protocol layer contributes.

scenario 01 · simulated

One message, three nodes

Follow one deterministic request from application data to a routed frame. Inspect every wrapper, change playback, then drop the first transmission to see why TCP sends it again.

01 · compose

This becomes the body of a simulated HTTP request.

23/120
One message, three nodesCurrent event: Client composes HTTP. The application turns your message into the body of an HTTP request.link 01link 02Client192.168.1.10Router192.168.1.1Server203.0.113.20
simulated topology · application layer · preparingSwipe horizontally to inspect the full path.

Step 1 / 11

application · preparing

Client composes HTTP

The application turns your message into the body of an HTTP request.

Experiment

Control the timeline

Playback
Failure injection

Share this state

The URL stores the message, step, speed, and failure mode. Playback is always paused when a shared link opens.

Inspect

Protocol stack

Each lower layer wraps the unit above it. The highlighted layer owns the current event.

  1. L04HTTP requestapplicationHTTP
  2. L03TCP segmenttransportTCP
  3. L02IPv4 packetnetworkIPv4
  4. L01Ethernet framelinkETH

HTTP request fields

The application describes what it wants the remote server to do.

Request line
POST /echo HTTP/1.1
Host
example.test
Content-Type
text/plain; charset=utf-8
Content-Length
23 bytes
Body
Hello from the browser.

Text alternative

Event log

Select any event to inspect it without relying on animation or color.

Build notes

What the visualization deliberately teaches

The lab exposes both its implementation decisions and its educational simplifications, because trustworthy technical visuals label the gap between a useful model and a real network trace.

  • Architecture

    Typed scenario data and pure transformations define the truth. React owns selected state; SVG and GSAP only present it.

  • Tradeoff

    SVG keeps labels crisp and exposes a readable document structure. Canvas would suit thousands of packets, but adds no value at this scale.

  • Limitation

    This is an explanatory simulation, not a packet capture. Header values, timing, addresses, and the successful second attempt are deterministic examples.

  • Performance

    Only one nested SVG group is animated. Static explanation stays in a Server Component, and reduced-motion users receive immediate transforms.