Vercel
Tailwind's default curve, cubic-bezier(0.4, 0, 0.2, 1), at 0.1s to 0.2s on nearly every hover, a 40s logo marquee, and a tooltip that leaves on a 0.1s ease-in. The movement is in the canvas.
The hero is a WebGL canvas and the scripts load Rive and Lottie. What CSS and WAAPI show is colour, shadow, short fades and a marquee, so the tiers here are the floor, not the show.
Tiers
Each curve was read from the browser while visiting vercel.com. The demo is our own element running the same timing.
small indicator scaling (resting transition)
The site animates scale; the demo shows the same timing as movement.
- Timing
- cubic-bezier(0.23, 1, 0.32, 1)
- Duration
- 0.2s
- Property
- scale
- Seen
- CSS transition, in computed style at the end, 2×
- On
- span.relative.flex > span.absolute.inset-0
icon chip shadow on hover
The site animates box-shadow; the demo shows the same timing as movement.
- Timing
- cubic-bezier(0.4, 0, 0.2, 1)
- Duration
- 0.2s
- Property
- box-shadow
- Seen
- CSS transition, on hover, 6×
- On
- span.relative.inline-flex > span.flex.size-6
menu item background on hover
The site animates background-color; the demo shows the same timing as movement.
- Timing
- cubic-bezier(0.4, 0, 0.2, 1)
- Duration
- 0.15s
- Property
- background-color
- Seen
- CSS transition, on hover, 2×
- On
- div.flex.flex-col > button.outline-none.m-0
hero canvas fading on scroll (WAAPI)
Click the track or Replay.
- Timing
- linear
- Duration
- 150ms
- Property
- opacity
- Seen
- Web Animations API, while scrolling, 1×
- On
- div#home-hero > canvas.pointer-events-none.absolute
tooltip leaving
The site animates a keyframe animation (fadeInTooltip); the demo shows the same timing as movement.
- Timing
- ease-in
- Duration
- 0.1s
- Property
- fadeInTooltip
- Seen
- CSS animation, when the pointer left, 1×
- On
- div > div#tooltip-_R_2lb5tr9abqpfivb_
logo marquee
The site animates a keyframe animation (marquee); the demo shows the same timing as movement.
- Timing
- linear
- Duration
- 40s
- Property
- marquee
- Seen
- CSS animation, in computed style at the end, 2×
- On
- div.flex.overflow-hidden > div.flex.shrink-0
Honest notes
- Reduced motion
- Nothing measured moves
Movement (transform, position, size): 0 events in the normal run, 0 with reduced motion on. All timed CSS and WAAPI motion: 45, then 48 (107%). 30 prefers-reduced-motion queries in stylesheets; scripts asked matchMedia about it 7 times.
transition: all- Used
13 elements computed
transition-property: allat the end of the visit. 0 declarations in the CSS the page loaded. - Motion in JavaScript
- Yes
Scripts include Framer Motion / Motion, three.js, Rive, Lottie. 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, 13 transitions move things (transform, opacity) and 1167 change surfaces (colour, shadow, background, filter), and 2 elements loop. The glossary's quick test reads that as material.
- Coverage
- One load, 14 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.
Nothing the tool could read moves anything (no transform, position or size changes), so reduced motion has nothing to reduce in the CSS. Whether the canvas and Rive animations respect it wasn't measured.
Notes
- A 0.1s transition on Tailwind's default curve turns up 790 times in the final computed scan (counting each element and property pair). It's the house floor.
- The marquee was applied but never fired an animationstart while the tool watched, so it's listed from the final computed scan.