Four defects were named and repaired. Three of them measurably improved. The fourth, the one about presentation, was fixed on phones and left broken on desktop, and the contrast table that came with the repair quietly omitted every pair that still fails. Average score across the six states moved from 4.0 to 5.8 out of 10.
The reference Tom likes
34 primitives, 5 animated parts, 16 inks, one ground line, and a treat that physically travels from one character to the other. The two figures stand 1.36 body-widths apart, close enough that the throw and the catch are one event. Peak motion is 5.70x its own average, and 16% of the loop is completely still. That stillness is what makes the leap read as a leap.
The six repaired states
Blinks now, the mouth squashes, and the reach beat exists in the CSS. But the numbers say it is still a wheel: peak motion is 1.73x its own average against the dog's 5.70x, and not one frame in 7.2 seconds is at rest. Two constant bobs at 5.2s and 6.1s run straight over the top of the reach and wash it out. This is the state every visitor sees first and longest.
The closest thing to the dog's rhythm in the set: a real two-hump beat, 35% of the cycle genuinely still, the pen and the pad appear, four writing strokes, and her mouth presses flat then releases. Held back by scale, 28.6 motion against the dog's 100, and by the fact that her cream glove and her cream notepad are the same ink and overlap each other.
The eyes dart left, then right, then blink. It starts and ends near rest, which the old metronome did not. But it is the weakest beat of the six (2.41x) and the quietest (26.6 motion), and at a 101px disc the double foot tap is a twitch. Nothing in the drawing says times or choosing.
The best-told story of the four in-form states. Raise, stir, stir, taste, with two clear motion bursts and both mouths opening. A prop gives the action a subject, which is exactly the job the dog's treat does. Lost marks: the pot reads as a blue bucket floating with no support, and the steam drifts up and to the right, half off the disc, where it reads as bubbles.
Two different animations wearing one name. On a phone the discs close to a 0.4-disc overlap, the tentacle meets her glove, the squash lands: 7/10, the best thing in the set. On desktop they stop 528px apart and shake hands with half a screen between them, which is 4/10, because contact is the whole point of a handshake. It is also 8.5x the dog's motion energy, looping forever behind a confirmation the customer is trying to read.
The biggest gain. Flinch, shrug, hold, sag. Burst 3.89x is the closest any state gets to the dog, 29% of the cycle is at rest, and it contains the only real hold in the set (750ms of complete stillness). The frown is unmistakable on both figures at both sizes. This is the one state where a stranger could tell you what is happening.
Each card stages the pair the way the real page stages them below 1280, which is what most traffic sees. The 1280 staging cannot be reproduced inside a 300px card, so it is shown as photographic evidence below.
Fix 1
These numbers are not a re-run of the repair's solver. Every colour below was read off a rendered
screenshot: probe points in each shape's own SVG coordinates, mapped through getScreenCTM(),
sampled as the median of a 3x3 block at 3x device pixel ratio. Whatever the browser actually painted, including the
0.92 group opacity and the yellow plate behind, is in the number. The right-hand column is what the repair report
claimed for the same pair.
| Adjacent pair (shapes that actually touch) | Measured | Report claimed | Rendered colours |
|---|---|---|---|
| OCTOPUS tentacle : tentacle | 1.00 | not listed |
#04060B / #04060B |
| OCTOPUS tentacle : tentacle (r) | 1.00 | not listed |
#04060B / #04060B |
| DETECTIVE hat brim : hat crown | 1.00 | not listed |
#1E0E24 / #1E0E24 |
| OCTOPUS pen : disc | 1.18 | not listed |
#E2D2AF / #DCC427 |
| DETECTIVE notepad : disc | 1.18 | not listed |
#E2D2AF / #DCC427 |
| DETECTIVE glove : disc | 1.18 | not listed |
#E2D2AF / #DCC427 |
| DETECTIVE hat brim : hair | 3.17 | 3.19 |
#1E0E24 / #A9472A |
| DETECTIVE coat : trousers | 3.25 | 3.29 |
#0B101E / #526493 |
| OCTOPUS mantle : tentacle | 3.27 | 3.30 |
#89459B / #04060B |
| DETECTIVE coat : sleeve | 3.27 | 3.31 |
#0B101E / #266F77 |
| DETECTIVE coat : collar | 3.27 | 3.31 |
#0B101E / #266F77 |
| DETECTIVE coat : hair | 3.27 | 3.30 |
#0B101E / #A9472A |
| DETECTIVE sleeve : disc | 3.30 | not listed |
#266F77 / #DCC427 |
| OCTOPUS pot : tentacle | 3.32 | 3.35 |
#2E678C / #04060B |
| OCTOPUS pot : pot rim | 3.32 | 3.35 |
#2E678C / #04060B |
| DETECTIVE trousers : disc | 3.32 | 3.30 |
#526493 / #DCC427 |
| DETECTIVE skin : hair | 3.33 | not listed |
#E1BE9D / #A9472A |
| DETECTIVE skin : collar | 3.33 | not listed |
#E1BE9D / #266F77 |
| OCTOPUS pot : disc | 3.48 | 3.47 |
#2E678C / #DCC427 |
| OCTOPUS mantle : disc | 3.53 | 3.52 |
#89459B / #DCC427 |
| DETECTIVE sleeve : glove | 3.88 | 3.85 |
#266F77 / #E2D2AF |
| DETECTIVE coat : belt | 3.95 | 3.96 |
#0B101E / #B6571C |
| OCTOPUS mantle : jaw patch | 4.15 | 4.13 |
#89459B / #E2D2AF |
| OCTOPUS mantle : eye white | 5.15 | 5.12 |
#89459B / #EAEAEA |
| DETECTIVE hat crown : hat band | 10.47 | 10.50 |
#1E0E24 / #DCC427 |
| DETECTIVE hat : disc | 10.47 | not listed |
#1E0E24 / #DCC427 |
| DETECTIVE hat brim : skin | 10.54 | 10.63 |
#1E0E24 / #E1BE9D |
| DETECTIVE coat : disc | 10.81 | 10.86 |
#0B101E / #DCC427 |
| OCTOPUS tentacle : disc | 11.55 | 11.62 |
#04060B / #DCC427 |
| DETECTIVE skin : eye | 11.63 | not listed |
#E1BE9D / #04060B |
| DETECTIVE skin : mouth | 11.63 | not listed |
#E1BE9D / #04060B |
| DETECTIVE coat : glove | 12.71 | 12.75 |
#0B101E / #E2D2AF |
| DETECTIVE coat : notepad | 12.71 | 12.75 |
#0B101E / #E2D2AF |
| OCTOPUS jaw patch : mouth | 13.58 | 13.65 |
#E2D2AF / #04060B |
| OCTOPUS jaw patch : open mouth | 13.58 | not listed |
#E2D2AF / #04060B |
| OCTOPUS eye white : pupil | 16.85 | 16.89 |
#EAEAEA / #04060B |
| DETECTIVE eye : catchlight | 16.85 | not listed |
#04060B / #EAEAEA |
Fix 2
.om-m is animated in all six states: om-think, om-grin, om-press,
om-frown, om-mouthhide. .om-mo cross-fades in on working.
The old stylesheet touched the mouth in zero states..om-smile, .om-oh and
.om-doh exist in the JSX and are referenced by no CSS rule at all. Harmless, but the
critic's original finding was phrased around .om-smile, and it is worth knowing the
answer was to route around it rather than use it.Fix 3
| Viewport | State | Disc | Centre gap | Disc-widths | Edge gap | Layout | Opacity |
|---|---|---|---|---|---|---|---|
| 1920 | idle | 300px | 1080px | 3.60 | 780px | block / absolute | 0.92 |
| 1440 | idle | 245px | 1025px | 4.19 | 780px | block / absolute | 0.92 |
| 1280 | idle | 218px | 998px | 4.58 | 780px | block / absolute | 0.92 |
| 1280 | confirmed | 218px | 746px | 3.43 | 528px | block / absolute | 1 |
| 1024 | idle | 118px | 142px | 1.20 | 24px | block / relative | 0.92 |
| 768 | idle | 118px | 142px | 1.20 | 24px | block / relative | 0.92 |
| 375 | idle | 101px | 122px | 1.20 | 20px | block / relative | 0.92 |
| 375 | confirmed | 86px | 52px | 0.60 | -34px | block / absolute | 1 |
| 320 | idle | 92px | 110px | 1.20 | 18px | block / relative | 0.92 |
display:none. RTL mirrors losslessly.
pointer-events:none, but it looks like a mistake.display:block at 320, 375, 768 and 1024.
No display:none anywhere in the scene's rules. Most traffic can now see this.pointer-events:none
and aria-hidden="true" throughout. Lighthouse accessibility on /book is 100.Fix 4
One full cycle per state, 32 frames, animations paused and the clock seeked so every frame is reproducible. Cropped tight to the characters. Motion is mean frame-to-frame change with the dog set to 100. Burst is peak over mean, which is what separates a beat from a wheel. Rest is the share of the cycle that is effectively still, and hold is the longest unbroken run of stillness, in frames of 1/32nd of a cycle.
| State | Motion | Burst | Rest | Hold | Motion through the cycle |
|---|---|---|---|---|---|
| DOG (reference) | 100 | 5.70x | 16% | 3 | |
| idle | 48 | 1.73x | 0% | 0 | |
| filling | 29 | 2.99x | 35% | 3 | |
| choosing | 27 | 2.41x | 16% | 3 | |
| working | 43 | 3.15x | 10% | 2 | |
| confirmed | 852 | 3.88x | 10% | 2 | |
| error | 66 | 3.89x | 29% | 8 |
Build and page health
npm run build passes. Characters chunk 4.71 kB, 1.39 kB gzipped.
The character CSS is 15.4 kB with comments stripped, 3.5 kB gzipped.idle to filling on the real page.prefers-reduced-motion leaves zero running animations, keeps the
figures visible and posed, mouth closed on a smile. Never hidden.On a phone, yes. The mobile band is genuinely good: two characters 20px apart on one floor, readable at 101px, reacting to what the visitor is doing, with a payoff on confirmation that actually makes contact. That is the majority of traffic and it is the first thing in five attempts that would not embarrass anyone.
On desktop, no, and it is not close. Two figures 780px apart in opposite corners, performing a two-hander where one offers a pen to nobody and the other shakes hands with half a screen of air, with the WhatsApp button parked on her disc. A customer would not read that as a scene. They would read it as two stickers.
Do not drop it. The remaining work is small and mostly deletion. The method is right now: simple primitives, five or six moving parts, squash in the keyframes, arcs on offset-path, eyes and a mouth that move. What is missing is staging, and staging is cheap:
1. Delete the 1280 branch. Use the band at every width. Two figures 1.2 disc-widths apart is the reference;
4.58 is not. This is a deletion, not a build.
2. Give idle a rest. Cut the two continuous bobs or gate them to part of the cycle, so there is a second and a
half where nothing moves. Stillness is what makes the dog's leap land.
3. Move the scene out from under the WhatsApp button.
4. Decide the palette question deliberately. Eight of twelve inks are off-brand. Either accept that these are
flat-illustration mascots rather than the emblem, or go back and buy separation with drawn contours and value inside
black and yellow, which is what noir cartoons do.
Three earlier QA passes waved animations through that Tom then rejected. For the record: I would put the phone version in front of a paying customer today. I would not put the 1280 version in front of one, and I would expect Tom to reject it for the same reason he rejected attempt one, which is that the figures are not in a scene together.