Sonner
The toast library's own demo. Toasts arrive and stack on the browser's plain ease at 0.4s, transform, opacity and height moving together; one stack move ran at 0.5s.
Tiers
Each curve was read from the browser while visiting sonner.emilkowal.ski. The demo is our own element running the same timing.
toast arriving and stacking
Click the track or Replay.
- Timing
- ease
- Duration
- 0.4s
- Property
- transform
- Seen
- CSS transition, after clicking a demo button, 4×
- On
- ol > li
toast moving in the stack, longer variant
Click the track or Replay.
- Timing
- ease
- Duration
- 0.5s
- Property
- transform
- Seen
- CSS transition, after clicking a demo button, 1×
- On
- ol > li
toast fading
Click the track or Replay.
- Timing
- ease
- Duration
- 0.4s
- Property
- opacity
- Seen
- CSS transition, after clicking a demo button, 3×
- On
- ol > li
code block copy button appearing
Click the track or Replay.
- Timing
- ease
- Duration
- 0.2s
- Property
- opacity
- Seen
- CSS transition, on hover, 6×
- On
- div.code-block_outerWrapper__nx8W3 > button.code-block_copyButton___ka9N
Honest notes
- Reduced motion
- Partly honored
Movement (transform, position, size): 8 events in the normal run, 2 with reduced motion on (25%). All timed CSS and WAAPI motion: 48, then 37 (77%). 1 prefers-reduced-motion query in stylesheets; scripts asked matchMedia about it 1 time.
transition: all- Used
2 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. 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
- spatial
At rest, 7 transitions move things (transform, opacity) and 83 change surfaces (colour, shadow, background, filter). The glossary's quick test reads that as material. The entry says otherwise because the tell counts what sits at rest, not what moved during the visit.
- Coverage
- One load, 10 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.
Measured with two opt-in clicks on the page's own demo buttons (Render a toast, then the first toast type), recorded in the raw file. Swipe-to-dismiss wasn't tried, so the swipe-out keyframes in the stylesheet aren't tiers.
Notes
- Every toast timing seen is the keyword ease. No custom curve at all.
- Reduced motion cut movement from 8 events to 2. Small numbers from two clicks, so read it as a hint.