Mangle’s Notes — The Sunday Long-Read No. S00London · Sun 18 Oct 2026 · Feature presentation

The interface is the edit.

What film editors know about pacing, and why design engineers should steal it. Running time ≈ 18 min.

Scroll to roll ↓
Part I

The slow open

A long-read opens slowly on purpose: one idea, held on screen long enough for the reader to settle. The first section is allowed to take its time, because the reader has chosen to be here.

Interfaces rarely get this luxury. Most screens are built to be scanned, not read, and the habits of scanning — big numbers, short labels, everything visible at once — leak into places where a slower rhythm would serve the reader better.

Scene 02 · Orrery — Visual feature

A transition, frame by frame.

::view-transition
├─ ::view-transition-group(root)
│ └─ ::view-transition-image-pair(root)
│ ├─ ::view-transition-old(root)0.50
│ └─ ::view-transition-new(root)0.50
└─ ::view-transition-group(hero)196×88
└─ ::view-transition-image-pair(hero)
├─ ::view-transition-old(hero)0.50
└─ ::view-transition-new(hero)0.50

Animate. The DOM has already changed underneath. A pseudo-element tree covers it: the hero group morphs from its old box to its new one while the old and new images crossfade.

Phase 2 / 3
Fig. 02Drag through the transition. The cut happens in the first frame; everything after it is a pseudo-element standing in for the page.
Part II

Cutting on motion

Editors cut on movement so the eye never notices the join. Interfaces can do the same: start a transition while the user is already moving.

The same instinct explains why a good view transition feels invisible. The old and new states share an element, the eye follows it, and the cut disappears into the motion.

Scene 04 · Marginalia — Taste essay

“Pacing is just respect for the reader’s attention.”

— From this essay
Part III

Credits

End with something short. A long-read earns a quick exit — a few one-liners and a single hand-made object to hold on.

Scene 06 · Mid-9th — Quick hits

Mid-9th

  1. 01A tiny font-feature-settings trick for tabular figures.
  2. 02Someone rebuilt a 1970s transit map in pure SVG.
  3. 03Field notes on 4px vs 8px baseline grids.
  4. 04A colour tool that thinks in OKLCH by default.
  5. 05Why your focus rings look cheap, in one image.
  6. 06Popover API now feels production-ready.
Lapidary — Made by hand
A44018024PlanElevation248 × 45°Detail A · ×5
Plate 01 · Plan, elevation, edge sectionWalnut serving board, oil finish, hand-cut chamfers.Placeholder Reader, Hackney · woodwork