Method — we measure before we design
Design measurement pipeline
Measures how reference sites really move and are typeset, flags what it failed to measure, and scores references against a brief.
5
reference sites measured
Palette, type and motion for each. Site names withheld.
Five references, 2026
4 of 5
motion probes returned data
The fifth failed and is marked unmeasured, never read as “no motion”.
Five references, 2026
0.001s
the duration an off-the-shelf extractor reported on all five
A parsing bug. The probe reads computed styles instead: 12 distinct durations on the richest site.
Five references, 2026
The actual tool
The same figures, restyled
Five references · motion probe
- Reference A3 curve pairscomplete
- Reference Bunmeasuredincomplete
- Reference C15 curve pairscomplete
- Reference D15 curve pairscomplete
- Reference E0 transitionsincomplete
A failed probe is unknown, never zero.
The problem
Before and after
Before
- Screenshots and a feeling.
- Durations eyeballed from a recording.
- A failed capture read as a design choice.
After
- Durations, easings and properties measured from computed styles.
- Every reference carries a completeness flag and a list of gaps.
- A brief is scored against references, and the spec uses numbers, not adjectives.
Measured output — five references
The curves and the type scale, as measured.
Each curve is one measured duration and easing pair, drawn over its real length. Where the probe recorded a custom curve only partially, the curve is shown as unrecorded rather than guessed.
- Aa50px · 1 ref
- Aa40px · 1 ref
- Aa36px · 1 ref
- Aa32px · 3 refs
- Aa27.2px · 1 ref
- Aa24px · 2 refs
- Aa22px · 2 refs
- Aa20px · 2 refs
- Aa17px · 1 ref
- Aa16px · 5 refs
- Aa15px · 2 refs
- Aa14px · 4 refs
- Aa13.3px · 1 ref
- Aa13px · 1 ref
- Aa12px · 2 refs
- Aa10px · 2 refs
Run replay
One run, stage by stage.
Five references: five token sets extracted, four motion probes returned data, three references complete. A sample brief kept five patterns and rejected five, each with a reason.
Design decisions
What we chose, and what we turned down.
Measure from computed styles.
Rejected
Trust the extractor’s duration field, or read durations off a recording.
Why
The extractor reported 0.001s on all five sites. A probe over computed styles returns real durations, each paired with its easing and property.
A failed probe is unknown, never zero.
Rejected
Leave the field empty.
Why
An empty motion field reads as “this site chose stillness”. Each reference carries a quality flag and a list of gaps, and the scorer is told to omit or caveat anything that rests on an incomplete one. A site with zero transitions is recorded as a measured zero, not a failure.
Pin the reduced-motion setting inside the probe.
Rejected
Inherit the machine’s setting.
Why
An OS setting or a changed browser default would silently flatten every animation. The probe pins it and says why in a comment.
Score fit, not quality.
Rejected
Rank references by how good they look.
Why
Everything in a curated gallery is good, so quality carries no signal. The scorer judges which pattern fits this brief, what it costs, and what it fights with, and lists what it rejected.
Human in control
What a person still decides
The pipeline measures; it does not judge taste. Each reference ships with an empty verdict, and a person fills in what to take and what to leave. Those decisions go into a ledger the scorer reads on the next run.
| Reference | Data quality | Worth keeping | What to take |
|---|---|---|---|
| Reference A | complete | yes | nav fades on scroll, 0.5s |
| Reference B | incomplete | undecided | — |
| Reference C | complete | no | — |
The hard part
Every duration read 0.001 seconds
The extractor returned a duration of 0.001s for every transition on every site.
Reduced-motion emulation was zeroing the animations.
It was not. The value was unrelated to the reduced-motion setting.
A parsing bug in the extractor’s duration field.
A separate probe over computed styles, with reduced motion pinned anyway as insurance.
Durations are paired with their easings, and the extractor’s values are never used.
Stack
Node and a headless browser for the probe; an open-source token extractor; Python to merge, flag and score; a routed model for the scoring step only.
Cost to run
Measurement needs no paid service. Only the scoring step calls a model.
Where this engineering shows up
Start here
Turn your website into the place guests book.
If a build makes sense, the teardown says which tier and why. If it doesn’t, it says that too.