Reduced Motion Audit
An animation inventory with per effect trigger, a duration bar on a shared scale, and a badge for whether each honors the reduced motion setting.
An animation inventory with per effect trigger, a duration bar on a shared scale, and a badge for whether each honors the reduced motion setting.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Reduced Motion Audit inventories every animation in the Acme workspace. Each row names the effect and its CSS selector, states the trigger, draws a duration bar to a shared time scale, and ends with a badge showing whether the effect honors reduce, partially honors it, or ignores it. Rows that ignore or partially honor the setting carry a short fix hint under the name.
Animations are one typed array and the header count of how many honor the setting derives from it. Bars share a single scale set by the longest effect, so a 240ms toast reads as visibly shorter than an 800ms count up at a glance.
Reach for this block on the accessibility or engineering health page, wired to whatever motion inventory your team keeps. Honoring the setting means the effect is removed or replaced with an instant state change, not merely shortened.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the product motion inventory. Other audit shapes:
Tip: test with reduce actually enabled in the operating system; a media query that is never exercised is easy to leave broken.