Arc
Buttons lift on a 0.15s ease with a 0.15s ease-out shadow, sections fade on 300ms ease-in-out, and a logo marquee takes 78.5 seconds a lap. No long statement move.
Tiers
Each curve was read from the browser while visiting arc.net. The demo is our own element running the same timing.
large button lift on hover
Click the track or Replay.
- Timing
- ease
- Duration
- 0.15s
- Property
- transform
- Seen
- CSS transition, on hover, 3×
- On
- a > button.c-bCeQxv.c-bCeQxv-jbZBFp-size-large
section fading in (WAAPI)
Click the track or Replay.
- Timing
- ease-in-out
- Duration
- 300ms
- Property
- opacity
- Seen
- Web Animations API, while scrolling, 2×
- On
- section.c-gujhdE > div.c-fdRmVl
icon nudge on hover
Click the track or Replay.
- Timing
- ease-in-out
- Duration
- 0.2s
- Property
- transform
- Seen
- CSS transition, on hover, 1×
- On
- span.c-knvjIb > svg
large button shadow on hover
The site animates box-shadow; the demo shows the same timing as movement.
- Timing
- ease-out
- Duration
- 0.15s
- Property
- box-shadow
- Seen
- CSS transition, on hover, 2×
- On
- a > button.c-bCeQxv.c-bCeQxv-jbZBFp-size-large
logo marquee
The site animates a keyframe animation (scroll); the demo shows the same timing as movement.
- Timing
- linear
- Duration
- 78.5225s
- Property
- scroll
- Seen
- CSS animation, on load, 2×
- On
- div.marquee-container > div.marquee
Honest notes
- Reduced motion
- Not honored
Movement (transform, position, size): 12 events in the normal run, 12 with reduced motion on (100%). All timed CSS and WAAPI motion: 30, then 30 (100%). 0 prefers-reduced-motion queries in stylesheets; scripts asked matchMedia about it 1 time.
transition: all- Used
0 elements computed
transition-property: allat the end of the visit. 2 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
- No viewport-sized WebGL canvas
Nothing here was hidden in a canvas.
- Posture
- material
At rest, 14 transitions move things (transform, opacity) and 13 change surfaces (colour, shadow, background, filter), and 2 elements loop. The glossary's quick test reads that as spatial. The entry says otherwise because the tell counts what sits at rest, not what moved during the visit.
- Coverage
- One load, 12 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.
Two inline rules set transition: all (0.15s and 0.1s ease-out), though no element computed it at the end of the visit. No prefers-reduced-motion query anywhere in the CSS; the 12 movement events ran the same with it on.
Notes
- The marquee's duration, 78.5225s, looks computed from its content width rather than chosen.
- Nothing longer than 0.3s apart from the marquee: no statement tier at all.