░▒▓█
Pave motion audit
Every place in the front end where something moves, read and scored against one motion language.
Real work · figures from the published write-up
The finding that started it
The same spinner ran at four different speeds.
01
How it was read
How it was read
Every stylesheet read, not sampled
┌─────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────┐│ 350 stylesheets │ ──► │ 8 auditor shards │ ──► │ 750 motion sites │ ──► │ 47 fixes │└─────────────────┘ └──────────────────┘ └──────────────────┘ └──────────┘
How it was read
One spinner, four speeds
One rotation, measured in each copy of the keyframes.
copy 1 ██████████████████████████████ 1.2 scopy 2 █████████████████████████ 1.0 scopy 3 ████████████████████ 0.8 scopy 4 ███████████████ 0.6 s
02
What a finding looks like
What a finding looks like
Toast enter: today and proposed
today ▕████████············▏ 200ms ease ▅█▇▅▄▃▂▁proposed ▕██████··············▏ 150ms reveal-ease █▆▅▄▃▂▁▁ 0·········250········500ms
What a finding looks like
Eight characters per curve
Speed over time for each easing in the audit.
linear ████████ linear progress onlyease ▅█▇▅▄▃▂▁ ease the browser defaultease-out █▇▇▆▅▄▃▂ ease-outdecelerate █▅▄▃▂▂▂▁ cubic-bezier(0, 0, 0.2, 1) most UIreveal █▆▅▄▃▂▁▁ cubic-bezier(0.33, 1, 0.68, 1) entrancesspring ██▅▁▁▁▁▁↺ cubic-bezier(0.44, 1.3, 0.15, 1) overshoots, then settles
What a finding looks like
Overlaps nobody saw in review
.toast slide-in ██████████······························ 0ms–240ms.dot pulse ████████████████████████████████████████→ 0ms, repeats.icon pop ·····██████████························· 120ms–370ms.toast fade ········██████·························· 200ms–360ms 0ms 500ms 1s
03
Handing off the hero
Handing off the hero
The hero cut against the product
The marketing hero drifted all the time; the product grid mostly holds still.
MEASURE HERO CUT PRODUCTvertical lines moving ██████████ 100% ██░░░░░░░░ 23%, in 17 pushesrow lines moving ░░░░░░░░░░ 0% █░░░░░░░░░ 11%a drawing's build ███░░░░░░░ 2.7 s ████████░░ 7.7 sa drawing's exit █░░░░░░░░░ 0.8 s █████░░░░░ 4.6 s
What changed
One duration scale, one easing set, one spinner speed.