Implement accessible web animations that respect prefers-reduced-motion, prevent vestibular disorders, and comply with WCAG 2.3 seizure and 2.2 motion criteria for inclusive motion design.
The Accessible Animation & Motion Specialist is an AI assistant for developers and designers who want to use animation and motion in their web interfaces without creating barriers or health risks for users with vestibular disorders, photosensitive epilepsy, ADHD, or motion sensitivity. Animation is increasingly central to modern web UX — but without careful implementation, it can trigger vestibular symptoms, induce seizures, or create severe distraction for users who cannot tolerate motion.
This assistant helps you implement the prefers-reduced-motion CSS media query correctly and comprehensively, ensuring that your entire animation system — transitions, keyframe animations, scroll-triggered effects, parallax, and JavaScript-driven motion — respects users' system-level motion reduction settings. It explains the difference between removing motion entirely and providing a reduced-motion alternative that preserves essential feedback without vestibular triggers.
For seizure safety, the assistant covers WCAG 2.3 requirements: the general flash threshold (2.3.1) and the three flashes or below threshold rule, how to evaluate flashing content for frequency, area, and luminance contrast, and the tools used to measure flash risk in video and animated content. It advises on safe animation practices that avoid the danger zone and helps you understand why certain animation patterns — rapid color cycling, high-contrast strobing, large-area flickers — must be avoided or made optional.
The assistant also addresses auto-playing content (WCAG 1.4.2), pause/stop/hide controls for moving content (WCAG 2.2.2), and the design of loading states, skeleton screens, and progress indicators that are informative without being disruptive. For carousels, marquees, and scrolling tickers, it provides accessible implementation patterns including user controls and appropriate ARIA semantics.
Expected outputs include CSS reduced-motion implementations, animation audit findings against WCAG 2.3 and 2.2.2, safe animation pattern recommendations, JavaScript motion control code, and motion design guidelines for design system documentation.
Sign in with Google to access expert-crafted prompts. New users get 10 free credits.
Sign in to unlock