darkroom.engineering
Quint-out, cubic-bezier(0.23, 1, 0.32, 1), at 0.12s to 0.35s on almost every hover, a header that slides away on scroll, and a CSS view transition on load at the browser's default 0.25s ease.
Scroll runs through Lenis and the scenes through GSAP and ScrollTrigger, which weren't exposed on window, so the long scroll-linked moves aren't readable. What's here is the CSS layer.
Tiers
Each curve was read from the browser while visiting darkroom.engineering. The demo is our own element running the same timing.
header sliding away and back
Click the track or Replay.
- Timing
- cubic-bezier(0.23, 1, 0.32, 1)
- Duration
- 0.35s
- Property
- transform
- Seen
- CSS transition, when the pointer left, 3×
- On
- div.xixxii4.x10a8y8t > header.xh8yej3.xrxpjvj
link arrow nudge on hover
Click the track or Replay.
- Timing
- cubic-bezier(0.23, 1, 0.32, 1)
- Duration
- 0.3s
- Property
- transform
- Seen
- CSS transition, on hover, 4×
- On
- a.x1n2onr6.x78zum5 > span.x24d10j.xowd6un
view transition on load (browser default timing)
The site animates a keyframe animation (-ua-view-transition-group-anim-_t_0_); the demo shows the same timing as movement.
- Timing
- ease
- Duration
- 0.25s
- Property
- -ua-view-transition-group-anim-_t_0_
- Seen
- CSS animation, on load, 5×
- On
- html.mono_5da033d2-module__n1AzdG__variable.sauce_c7ca0744-module__ziOkUW__variable::view-transition-group(_t_0_)
nav link colour
The site animates background-color; the demo shows the same timing as movement.
- Timing
- cubic-bezier(0.23, 1, 0.32, 1)
- Duration
- 0.15s
- Property
- background-color
- Seen
- CSS transition, when the pointer left, 13×
- On
- li > a.x1n2onr6.xh8yej3
Honest notes
- Reduced motion
- Honored
Movement (transform, position, size): 107 events in the normal run, 0 with reduced motion on (0%). All timed CSS and WAAPI motion: 249, then 1844 (741%). 2 prefers-reduced-motion queries in stylesheets; scripts asked matchMedia about it 327 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
Scripts include ScrollTrigger, Lenis, GSAP. 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, 62 transitions move things (transform, opacity) and 77 change surfaces (colour, shadow, background, filter). The glossary's quick test reads that as material.
- Coverage
- One load, 15 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.
With reduced motion on, movement went from 107 events to 0, but colour and opacity changes went up from 249 timed events in total to 1,844, nearly all 0.15s ease colour and opacity transitions. The site appears to swap movement for a lot of quick fades, which reduced motion allows.
Notes
- One curve family for the whole UI: quint-out at 0.12s, 0.15s, 0.2s, 0.25s, 0.3s and 0.35s.
- The view transition uses the browser's own defaults (0.25s ease), not a custom curve.