Interactive experiments

These are not articles. They are things that actually run in your browser — real data, real code. Each one states what it genuinely computes, and what it cannot.

• scroll timeline

  The 1.07 seconds of one request

  A real `curl -v` as a timeline that lights up as you scroll. Zero JavaScript — pure CSS `animation-timeline: view()`.

  What is real

  Every number comes from one real request to this site: DNS 5.2 ms, TCP 324.3 ms, TLS 234.3 ms, server 278 ms, transfer 229.5 ms.

  What it cannot do

  It is one measurement, not a benchmark. A different network or a different day gives different numbers.

• interactive

  A real protocol, byte by byte

  Click any byte to see which field owns it, and why it matters.

  What is real

  The four frames (plaintext data, encrypted data, handshake, ping) were produced by ESPTier’s own C encoder, compiled on a host, and round-trip decoded.

  What it cannot do

  It is four frames, not a live capture, and it says nothing about timing on the device.

• playable

  The bead-lens optics lab

  A real ray-tracing shader ported to WebGL2: drag to orbit, turn the knobs, watch it recompute.

  What is real

  The fragment shader is the same one the desktop program runs (`#version 330 core` → `#version 300 es`), firing one primary ray per pixel from a pinhole camera.

  What it cannot do

  Forward simulation only (it does not solve the inverse, printable-image problem); a single refractive index, so no dispersion; a pinhole camera, so no depth of field.

• playable

  The TCP congestion-control lab

  A live simulation of the congestion window and the bottleneck queue: a sawtooth on top, the queue below.

  What is real

  Three real relationships are on the chart — the window grows, capacity caps throughput, the queue becomes delay.

  What it cannot do

  It steps once per round trip, not once per packet: no fast retransmit, no SACK, no pacing. Do not use it to estimate real throughput.

• data

  The open ledger

  This site’s own numbers, computed from the repository at build time.

  What is real

  File count, bilingual pairing, word count, code blocks, the near-duplicate similarity distribution, and a real defect log.

  What it cannot do

  It describes the shape of the corpus, not its quality.

There are also 8 client-side tools (subnet, IPv6, bases, endianness, CRC, chmod, encoding, cron). See the tools →

How these are checked

Every component went through a screenshot → vision-model review → fix → re-screenshot loop. It has caught real defects, not ceremony:

The byte cells had no colour at all — the cells are created by JavaScript, so Astro’s scoped-style attribute never landed on them and my CSS silently did nothing; they fell back to the browser’s default button styling. `:global()` fixed it.

Every page scrolled sideways on a phone — eight non-wrapping header links gave the nav a 492px minimum and forced the whole document to 631px inside a 390px viewport.

The home hero sat 32px out of alignment — `.hero`’s `padding: … 0 …` shorthand zeroed the inline padding `.wrap` had just set.

Layout claims are not decided by eye: a DOM probe measures `documentElement.scrollWidth` against `innerWidth`, and Range rects measure text extents. Pixel inference got this wrong, confidently.