Back to the Lab

Cal.com · coss ui12 Oct 2026Merged · 15 Oct 2026

A guardrail that covered half the motion

Dialog and Toast kept moving under reduced motion. Measured it, fixed it, kept the fades.

Noticed

coss ui guards motion in exactly one place: four Toast shake keyframes, in globals.css. Toast's own 500ms slide-in and Dialog's 200ms scale on desktop and 16px slide on phones run unchanged with prefers-reduced-motion: reduce set. I rendered the twelve primitives in Chromium at 1280×800 and 390×844 and read every running transition from document.getAnimations() rather than inferring it from class names: ten of the twelve animate, and all ten are identical with the setting on. The guard also lives in the consumer's stylesheet, so a registry install of Toast gets the shake with no guard at all.

Made

Movement values apply under motion-safe; the fades always run. Dialog drops the scale and the translate and keeps both fades. Toast appears in place on its existing opacity transition, and its shake guard moves into the component so it travels with the install. A blanket transition: none would have treated a fade and a slide the same; this makes the call per property. Six files, +32 / −20, all five coss checks passing.

Open the pull request All of the Lab