How Data Travels

About this style

Packet switching was worked out independently in the 1960s by Paul Baran at the RAND Corporation and Donald Davies at Britain's National Physical Laboratory, who gave the packet its name. A message is cut into small numbered blocks that travel separately, each router reading a packet's header and forwarding it one hop closer to its destination. TCP/IP, described by Vint Cerf and Bob Kahn in 1974, lets the receiver put the pieces back in order and has the sender resend any that go missing. Networking courses still teach it with grid-like schematics of routers, links and colored packets.

Make a 10-second explainer of how data crosses a network: a message splits into numbered packets that hop through routers by different routes, one is lost and resent, and they reassemble in order at the other end.

<inputs>
If I don't give you something, use the default and don't ask.
- Series: Plainwire, lesson 02 (fictional).
- Title: "How a message crosses the network"
- Sender and receiver: Marisol's laptop → Teo's phone.
- Message: "See you at the pier at 6", sent as four packets: "See you" · "at the" · "pier" · "at 6".
- Summary: "4 packets · 3 routes · 1 resend · back in order"
- Length: 10 seconds.
</inputs>

<direction>
- Look: an engineering-notebook schematic, clean enough for a textbook. Paper #F6F7F9 with a 20px minor grid (#E2E7EE, 1px) and a 100px major grid (#CBD3DE, 1px); ink #151B27; secondary #5C6677. Packets take four flat colors: #FF5A3C (1), #FFB000 (2), #2F7BFF (3), #14A86E (4); background traffic is #AAB3C2.
- Type: Geist 700 for the title, 60px, top-left at (120, 96); Geist 500 for device names and the summary, 22–26px; Geist Mono 500 for router names, packet headers and notes, 20–22px.
- Network, snapped to the 20px grid: routers are 84×84 rounded squares (radius 18, 3px ink stroke, white fill) with four short port ticks on their edges and their name beneath in Geist Mono 20px, centered at R1 (420, 600), R2 (620, 400), R3 (620, 800), R4 (900, 600), R5 (1300, 400), R6 (1300, 800), R7 (1500, 600). Links are 4px ink lines made only of horizontal and 45° segments with 16px rounded corners: R1–R2, R1–R3, R1–R4, R2–R5, R3–R6, R4–R5 (right to x 1100, then 45° up into R5), R5–R7, R6–R7. Marisol's laptop, line-drawn, spans x 120–280 around y 600 and links to R1; Teo's phone (140×250, rounded, a dark bezel) spans x 1650–1790, y 500–750 and links to R7. Each device has its name in Geist 500, 22px, beneath.
- Packets: on the network they are 72×44 tiles (radius 10) in their color with "#1" to "#4" in Geist Mono 600, 22px (white on red and blue, ink on yellow and green). At the ends they open to 240×60 tiles that add the payload in Geist 600, 22px, and a header in Geist Mono 20px reading its TTL.
- Store and forward is the rule that sells it. Tiles travel links at a constant 800px/s, easing only over the first and last 0.06s, never rotating, and stop for 0.15s centered inside every router they pass while that router's port ticks take the packet's color. A router holds one packet at a time; the rest wait in its queue. Each hop lowers the TTL by one, from 64, so every packet lands with TTL 60.
- Routes: #1 and #2 go R1 → R2 → R5 → R7; #4 goes R1 → R3 → R6 → R7; #3 tries R1 → R4 → R5. R5 is congested: it has a visible three-slot queue (76×48 outlines stacked just to its right), forwards one packet every 0.3s, first in, first out, and from 3.8s grey traffic keeps the queue packed (forwarded grey tiles leave toward R2 or R4). #2 joins the back of the queue and waits about 0.8s; #3 arrives at about 4.2s to find every slot full and is dropped: its fill drains to a dashed outline over 0.3s as it sinks 24px and fades, with the note "R5 queue full: #3 dropped" beside it. A 36px timeout ring beside the laptop fills over 1.0s, then #3 is resent, with a small "resend" tag, by the lower route. Arrival order is 1, 4, 2, 3.
- Reassembly: above the phone, a receive buffer of four numbered dashed slots (240×60, x 1560–1800, from y 200, 72px apart). Each tile opens into its own numbered slot whatever order it arrives in, so slot 3 stays visibly empty until the resend lands. Then the four slide together and merge into one message bubble (Geist 600, 24px), right-aligned at x 1800 where the slots were.
- One header close-up: when #1 reaches R2, a small card above it (Geist Mono 20px) reads "to: Teo's phone · TTL 63 · next hop R5" for 0.8s.
- Background traffic: a few grey 40×24 tiles on other links at the same speed, never more than six at once.
- Easing: routers pop in from scale 0.9 over 0.3s on cubic-bezier(0.34, 1.3, 0.64, 1); links draw by stroke-dashoffset over 0.5s on cubic-bezier(0.65, 0, 0.35, 1); text rises 12px as it fades in over 0.4s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: a schematic you could print in a networking textbook: grid-snapped links, store-and-forward pauses, a TTL counting down, real reordering and a resend. Cheap: glowing dots zipping along lines in a dark void.
Banned: dark backgrounds, glow or neon, world maps or globes, cloud icons, padlocks, streams of 0s and 1s, packets overlapping inside a router, packets leaving the links, curved spaghetti links, emoji, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.0s: the grid; routers pop in from R1 outward and the links draw between them; the laptop and phone draw on; the title rises in.
- 1.0–2.0s: the message types into a speech bubble above the laptop (x 120–540, y 330–400) at 30 characters a second, then splits at its word gaps into four tiles that drop into a stack under the laptop and take their numbers.
- 2.0–4.2s: the packets launch 0.25s apart and hop; grey traffic moves; #1's header card shows at R2; #2 waits in R5's queue.
- 4.2–5.2s: #3 reaches R5's full queue and is dropped; the timeout ring fills; #1 lands in slot 1.
- 5.2–6.4s: #3 is resent by the lower route; #4 lands in slot 4, then #2 in slot 2, with slot 3 still empty.
- 6.4–7.8s: #3 runs on through R6 and R7 and lands in slot 3, TTL 60; the grey traffic eases off.
- 7.8–8.6s: the slots slide together into the message bubble; the summary rises in under the title.
- 8.6–10.0s: hold, nothing moving.
For other lengths, change the launch spacing and the traffic, keep the hop speed and the router pause, and keep at least 1s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: inline SVG, setting attributes and transforms from seek; no other libraries (no three.js: this style is flat).
- Precompute every packet's schedule once at load: for each hop, its departure and arrival from link length ÷ 800px/s, the 0.15s router pause and any queue wait; seek(t) looks up each tile's current link and distance along it from that table.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check every tile stays on its link and never overlaps another inside a router, each hop lowers the TTL by exactly one (all land at 60), arrivals go 1, 4, 2, 3 into matching slots, slot 3 is empty until the resend lands, and the merged bubble reads exactly "See you at the pier at 6". Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Blueprint Technical Drawing

Made by us

A cyanotype-blue engineering sheet that drafts itself: centerlines, compass-swept gears, hatching and dimension lines a…

Material Container Transform

Made by us

A recipe app demonstrates Material-style motion: a card expands into a full screen, tabs switch on a shared axis, a FAB…

Isometric Hairline

Made by us

A tidy isometric line-art explainer: constant 2px strokes, white faces and one vermilion accent as a parcel travels fro…

Flat Vector Science Explainer

Made by us

A bright, rounded science explainer on a deep-space backdrop: springy geometric shapes, two-tone shading and soft long…