materialmeasured

Attio

attio.comcaptured 2026-10-17raw file reduced-motion run

Things arrive out of a blur on cubic-out, images scale under the pointer on a curve that's nearly all front, and colour changes run on Material's standard 0.3s ease.

Tiers

Each curve was read from the browser while visiting attio.com. The demo is our own element running the same timing.

statement

headline arriving out of a blur (WAAPI)

cubic-bezier(0, 0, 0.58, 1)

Scrub through the curve

Click the track or Replay.

Timing: cubic-bezier(0, 0, 0.58, 1)
Duration: 600ms
Property: opacity
Seen: Web Animations API, on load, 1×
On: div.flex.flex-col > h1.text-balance.font-display

secondary

product panels arriving out of a blur (WAAPI)

cubic-bezier(0.33, 1, 0.68, 1)

Scrub through the curve

Click the track or Replay.

Timing: cubic-bezier(0.33, 1, 0.68, 1)
Duration: 600ms
Property: opacity
Seen: Web Animations API, on load, 1×
On: div.overflow-hidden.rounded-xl > div.h-full

signature

image scale on hover

cubic-bezier(0, 0, 0, 1)

Scrub through the curve

The site animates scale; the demo shows the same timing as movement.

Timing: cubic-bezier(0, 0, 0, 1)
Duration: 0.5s
Property: scale
Seen: CSS transition, on hover, 6×
On: div.absolute.inset-0 > img.object-cover.transition

utility

nav link colour

cubic-bezier(0.2, 0, 0, 1)

Scrub through the curve

The site animates color; the demo shows the same timing as movement.

Timing: cubic-bezier(0.2, 0, 0, 1)
Duration: 0.3s
Property: color
Seen: CSS transition, when the pointer left, 10×
On: li > a.relative.inline-flex

exit

card glow shrinking as the pointer leaves

cubic-bezier(0.33, 1, 0.68, 1)

Scrub through the curve

The site animates scale; the demo shows the same timing as movement.

Timing: cubic-bezier(0.33, 1, 0.68, 1)
Duration: 0.2s
Property: scale
Seen: CSS transition, when the pointer left, 1×
On: a.group.relative > div.pointer-events-none.absolute

Honest notes

Reduced motion: Partly honored
Movement (transform, position, size): 77 events in the normal run, 22 with reduced motion on (29%). All timed CSS and WAAPI motion: 975, then 792 (81%). 22 prefers-reduced-motion queries in stylesheets; scripts asked matchMedia about it 36 times.
transition: all: Used
11 elements computed transition-property: all at the end of the visit. 0 declarations in the CSS the page loaded.
Motion in JavaScript: Yes
Scripts include Framer Motion / Motion. 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: material
At rest, 205 transitions move things (transform, opacity) and 2481 change surfaces (colour, shadow, background, filter), and 11 elements loop. The glossary's quick test reads that as material.
Coverage: One load, 24 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 WebGL canvas fills part of the hero; its motion isn't measured. Reduced motion cuts movement to 29% but leaves most fades and blurs running, so it's marked partial.

Notes

cubic-bezier(0, 0, 0, 1) puts both handles at x = 0: the image reaches most of its scale almost at once and spends the rest of the half second settling.
The card glow arrives in 0.24s and leaves in 0.2s on the same cubic-out, a small faster-exit rule.
Most entrances animate filter (blur) and opacity together. The demo shows the opacity half.