Obys Agency
Images that slide a long way on expo-style curves, a 3.5s progress bar, and hover springs run through the Web Animations API as a sampled linear() curve. Everything travels.
Tiers
Each curve was read from the browser while visiting obys.agency. The demo is our own element running the same timing.
work images sliding in on load
Click the track or Replay.
- Timing
- cubic-bezier(0.16, 1, 0.3, 1)
- Duration
- 1.6s
- Property
- transform
- Seen
- CSS transition, on load, 38×
- On
- figure.ho-wo-2-r > img
loading progress bar
Click the track or Replay.
- Timing
- cubic-bezier(0.16, 1, 0.3, 1)
- Duration
- 3.5s
- Property
- transform
- Seen
- CSS transition, on load, 5×
- On
- div#prg > div
menu underline
Click the track or Replay.
- Timing
- cubic-bezier(0.19, 1, 0.22, 1)
- Duration
- 0.8s
- Property
- transform
- Seen
- CSS transition, on hover, 1×
- On
- a > span::before
hover spring on menu links (WAAPI)
Click the track or Replay.
- Timing
- linear(0 0%, 0.1294 2%, 0.2421 4%, 0.3402 6%, 0.4257 8%, 0.5 10%, 0.5647 12%, 0.6211 14%, 0.6701 16%, 0.7128 18%, 0.75 20%, 0.7824 22%, 0.8105 24%, 0.8351 26%, 0.8564 28%, 0.875 30%, 0.8912 32%, 0.9053 34%, 0.9175 36%, 0.9282 38%, 0.9375 40%, 0.9456 42%, 0.9526 44%, 0.9588 46%, 0.9641 48%, 0.9688 50%, 0.9728 52%, 0.9763 54%, 0.9794 56%, 0.9821 58%, 0.9844 60%, 0.9864 62%, 0.9882 64%, 0.9897 66%, 0.991 68%, 0.9922 70%, 0.9932 72%, 0.9941 74%, 0.9948 76%, 0.9955 78%, 0.9961 80%, 0.9966 82%, 0.997 84%, 0.9974 86%, 0.9978 88%, 0.998 90%, 0.9983 92%, 0.9985 94%, 0.9987 96%, 0.9989 98%, 1 100%)
- Duration
- 1600ms
- Property
- transform
- Seen
- Web Animations API, on hover, 1×
- On
- div#header-menu > a
contact button fill
Click the track or Replay.
- Timing
- cubic-bezier(0.16, 1, 0.3, 1)
- Duration
- 0.6s
- Property
- transform
- Seen
- CSS transition, on hover, 1×
- On
- a#fix-co-em > div.l
Honest notes
- Reduced motion
- Not honored
Movement (transform, position, size): 65 events in the normal run, 62 with reduced motion on (95%). All timed CSS and WAAPI motion: 66, then 63 (95%). 0 prefers-reduced-motion queries in stylesheets; scripts asked matchMedia about it 0 times.
transition: all- Not seen
0 elements computed
transition-property: allat the end of the visit. 0 declarations in the CSS the page loaded. - Motion in JavaScript
- Yes
No motion library fingerprints in the scripts. Motion run on requestAnimationFrame isn't readable from styles, so it isn't in the tiers.
- Canvas
- Motion lives in canvas
A WebGL canvas covers at least a quarter of the viewport. What it draws is out of scope here.
- Posture
- spatial
At rest, 48 transitions move things (transform, opacity) and 41 change surfaces (colour, shadow, background, filter). The glossary's quick test reads that as spatial.
- Coverage
- One load, 11 elements hovered
Scrolled to the bottom with the mouse wheel, hovered and left a spread sample of links and buttons. Menus, clicks, forms and other pages weren't visited.
A full-viewport WebGL canvas sits behind the page; what it draws isn't measured. The hover spring is a JavaScript spring sampled into a CSS linear() easing and handed to element.animate, so it is readable here.
Notes
- No fast tier. The quickest motion seen was a 0.4s colour change on the logo; everything else runs 0.6s or longer.
- The spring's linear() string has 51 stops at 2% intervals. It overshoots nothing: it's a critically damped settle, 50% of the way there by 10% of the time.
- No prefers-reduced-motion query anywhere in its CSS or scripts.
From notes
Values from Bryce's own notes, kept apart from this measurement and dated as written. Where the live site differs, the note says so.
2026-09-01 statement curve (expo-out)
cubic-bezier(0.16, 1, 0.3, 1)1.6sListed as one of the four teams at 0.8s and 1.6s. Live on 2026-10-17: 1.6s on the work images and 0.8s on 42 elements at rest. But no tier at 300ms or under was seen, so the live page fails the "fast tier underneath" half of the convention.
design-taste motion/default/README.md