Mangle’s Notes — D⁴ No. 000London · Tue 13 Oct 2026 · Reel 000

Daily Digital Design Dispatch.

How the browser fakes a seamless page change, and nine smaller things worth your six minutes. Running time ≈ 6 min.

Scroll to roll ↓
Scene 01 · Orrery — Visual feature

View transitions, in one picture.

::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. 01The browser snapshots the old page, builds a temporary layer tree, and crossfades into the new one — you only describe the change.
Scene 02 · Marginalia — Taste essay

“Taste is mostly a long list of things you quietly decided not to ship.”

— Example Essayist, “On Leaving Things Out”
Scene 03 · Autopen — AI & agents

Autopen

03.1

Show the agent’s plan before it acts

A visible, editable step list beats a spinner. Users trust what they can interrupt.

03.2

Streaming text needs a resting state

Design the moment the stream ends: settle the layout, then reveal actions.

03.3

Undo is the best guardrail

If every agent action can be reversed in one tap, confirmation dialogs can go.

Scene 04 · Volvelle — Motion

Volvelle

01

Springs over durations

Tune stiffness and damping once; let every component inherit.

02

Scroll-driven progress, no JS

animation-timeline: scroll() replaces a small library.

03

Tokens for motion, not just colour

Name easings by intent: enter, exit, emphasise.

04

Reduce motion is a design surface

Swap travel for opacity, keep the meaning.

05

One radius scale to rule them

Nested corners stay concentric when radii subtract padding.

Scene 05 · 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.
  7. 07A typeface specimen worth printing out.
  8. 08Hover states for touch: just don’t.
  9. 09The quietest landing page of the month.
  10. 10Go outside. That’s the hit.
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