Motion & Animation

prefers-reduced-motion

Require animations to respect prefers-reduced-motion.

Flags Tailwind animation utilities (animate-spin, transition-*) that ship without a motion-reduce: variant. The rule keeps the codebase usable for vestibular-disorder users — a population AI agents never optimise for by default.

Behavior

• Fixable: Yes — wraps motion classes with a `motion-safe:` prefix so the animation only runs when the user has not requested reduced motion. Because the fix only adds a modifier without removing anything, the GitHub Action renders it as a one-click `suggestion` block — users in the default state see no visual change.
• Suggestions: Yes.
• Maps to: WCAG 2.3.3 (Animation from Interactions).

Examples

Bad:

<div className="animate-spin transition-all duration-500" />

Good:

<div className="motion-safe:animate-spin motion-safe:transition-all motion-safe:duration-500" />

Related rules

• focus-visible-styleBlock outline-none unless a replacement focus indicator is present.
• focus-trap-patternsDetect modals and drawers that don't establish a focus trap.
• icon-accessibilityRequire icons to carry an accessible name or be marked decorative.

Use it

Enable prefers-reduced-motion in your eslint.config.js:

import deslint from '@deslint/eslint-plugin';

export default [
  {
    plugins: { deslint },
    rules: {
      'deslint/prefers-reduced-motion': 'error',
    },
  },
];

Found a false positive? Report it on GitHub →

← Back to all rules