Use when adding animations, transitions, parallax effects, or auto-playing video to a UI — to respect users' motion sensitivity preferences and prevent content that could trigger seizures.
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Use when adding animations, transitions, parallax effects, or auto-playing video to a UI — to respect users' motion sensitivity preferences and prevent content that could trigger seizures.
source
W3C WCAG 2.1 SC 2.3.1 Three Flashes (Level A), SC 2.3.3 Animation from Interactions (Level AAA); CSS prefers-reduced-motion media query; Vestibular Disorders Association guidelines
Respect prefers-reduced-motion to prevent animation-triggered vestibular episodes, and never flash content more than 3 times per second.
Why This Is Best Practice
Adopted by:prefers-reduced-motion is supported in all modern browsers (Chrome,
Firefox, Safari, Edge) since 2019 and is natively supported by macOS, iOS, Windows,
and Android OS-level settings. Apple, Google (Material Design), and Microsoft (Fluent
Design) all include reduced motion as a required accessibility consideration in their
design systems. WCAG 2.1 SC 2.3.1 (Level A) prohibits content that flashes more than
3 times per second — this is legally required under all major accessibility laws.
35% of people with migraine disorders report sensitivity to motion and
flashing. The Vestibular Disorders Association estimates 35 million Americans experience
vestibular dysfunction — animations can trigger vertigo, nausea, and disorientation.
The 2006 Pokemon epilepsy incident (685 children hospitalized after a flashing scene)
is the documented case that established the 3 Hz flash threshold in broadcasting and
later WCAG.
Motion that can't be turned off affects users persistently across every
visit. provides a system-level user preference — one CSS
media query respects it across all animations without requiring an in-app setting.
Verify all animations are removed or reduced after enabling the OS preference.
When NOT to Use
Animations that convey critical state (loading spinner, progress bar) — don't remove entirely; slow them down instead. A stopped spinner looks like a hang.
Non-animated transitions — CSS color transitions without movement do not trigger vestibular symptoms. Short color transitions (< 200ms) are generally acceptable.
Common Mistakes
Checking prefers-reduced-motion only in CSS but not in JavaScript animations. GSAP, Three.js, Framer Motion, and canvas animations require a JavaScript check. CSS prefers-reduced-motion does not affect JavaScript-driven animations.
Removing all transitions but keeping scroll-jacking. Parallax scroll effects and scroll-jacking trigger vestibular symptoms even without CSS animations. Disable scroll-behavior: smooth and parallax under prefers-reduced-motion.
Assuming reduced motion means no motion. Some users prefer less motion, not zero motion. Subtle fade-in (opacity only, no position change) is generally acceptable. Test with actual users who have vestibular sensitivities.
