What is the accessible-motion skill?
The accessible-motion skill from dylantarre's animation-principles repository adapts all 12 Disney principles for people with vestibular disorders or motion sensitivity. It says to avoid the 150 to 400ms window, offers instant or 500ms plus alternatives, honors prefers-reduced-motion, and lists WCAG 2.3.3, 2.2.2 and 2.3.1.
The accessible-motion skill sits at skills/01-by-domain/accessible-motion in dylantarre's animation-principles repository. Its SKILL.md applies Disney's 12 animation principles while protecting users with vestibular disorders, motion sensitivity and cognitive disabilities.
Its timing advice is specific. Skip the 150 to 400ms range, because that is fast enough to notice and slow enough to trigger symptoms. Choose instant at 0ms for snappy feedback, or extended at 500ms plus with minimal distance for gentle perception.
The swaps the skill makes
- Squash and Stretch becomes an opacity or color change. A button darkens on press, and loading indicators pulse opacity instead of bouncing.
- Anticipation becomes a static indicator. A loading state shows immediately and hover changes color instead of scaling.
- Follow Through is eliminated. Elements reach the final state at once with no settling, bouncing or overshoot.
- Arc allows straight movement only, if there is any movement at all.
- Secondary Action is reduced to a single, clear feedback per interaction with no cascading or staggered animation.
- Exaggeration is removed entirely.
Motion sorted by risk
- Generally safe: subtle opacity fades, color transitions, scale changes under 5%, very slow movement at 500ms plus, and non-repeating animations.
- Potentially harmful: parallax scrolling, background movement, zoom animations, spinning elements, fast repeated animations and moving areas larger than a quarter of the viewport.
- Always avoid: auto-playing video backgrounds, infinite animations, flashing and rapid zoom in and out.
WCAG criteria and testing
The skill cites three WCAG 2.1 criteria: 2.3.3 Animation from Interactions at AAA, 2.2.2 Pause, Stop, Hide at A for moving content over 5 seconds, and 2.3.1 Three Flashes at A. Its test list starts with enabling reduced motion in OS settings.
Who the accessible-motion skill is for
Best for
- Implementing reduced motion alternatives, vestibular-safe animations or WCAG compliance, which are the triggers in the skill description. For audits beyond motion, use the web accessibility skill.
- Products where parallax, zoom or looping effects might harm users with motion sensitivity, alongside the wider checklist in fixing accessibility.
- Teams who want a checklist the agent can run through when animating.
Not for
- Playful or expressive motion. This skill favors clarity over personality and removes exaggeration entirely.
- Performance tuning. The skill covers user comfort, and fixing motion performance covers performance.
How to install Accessible Motion Skill: Reduced Motion for Vestibular Safety
git clone https://github.com/dylantarre/animation-principles.git ~/.claude/plugins/animation-principlesOption one, the plugin
Open your Claude Code settings and list
animation-principles@github:dylantarre/animation-principlesunder plugins, which is the first route the README gives.Option two, a manual clone
Run
git clone https://github.com/dylantarre/animation-principles.git ~/.claude/plugins/animation-principles. The README labels this manual installation.Locate the folder
Inside the clone the skill is at skills/01-by-domain/accessible-motion. Other skills in the same repository install together with it.
Trigger it
Describe the job in the terms from its description: reduced motion alternatives, vestibular-safe animation, WCAG compliance or motion sensitivity.
Check that it loaded
Ask the agent to add a hover and a modal animation to a page. It should wrap motion in prefers-reduced-motion, avoid the 150 to 400ms range and offer a no-motion alternative.
Key features
- Reduced motion media queryIncludes a CSS pattern that swaps a 300ms transform transition for a 200ms opacity fade, or no transition, under prefers-reduced-motion.
- JavaScript detectionShows how to read the preference with window.matchMedia and branch between instant transitions and full animation.
- All 12 principles adaptedA table pairs each Disney principle with an accessible implementation, from opacity changes to static visual clarity.
- Timing to avoidRecommends either instant or extended durations and warns against the 150 to 400ms range.
- Three risk tiersSorts patterns into generally safe, potentially harmful and always avoid, so the agent has a clear reference list.
- WCAG referencesNames success criteria 2.3.3, 2.2.2 and 2.3.1 along with what each one requires.
- Ten item checklistCovers global preference support, pausing, flash limits, focus states, loading states, error states and form validation.
- Six step test routineStarts with OS reduced motion and ends with screen reader testing and vestibular disorder users if possible.
- Core principleStates that animation should enhance understanding and never hinder it, and that harmful motion needs a working alternative.
Frequently asked questions
What is the accessible-motion skill?
It is a skill in dylantarre's animation-principles repository that applies Disney's 12 animation principles for users with vestibular disorders, motion sensitivity and cognitive disabilities. It provides reduced motion CSS and JavaScript patterns, a risk list, WCAG references, a checklist and a test routine.
How do I install the accessible-motion skill?
The README gives two routes. Add animation-principles@github:dylantarre/animation-principles to the plugins list in Claude Code settings, or clone the repository into the plugins directory with git clone. The skill folder inside the clone is skills/01-by-domain/accessible-motion. A third README route, direct use, names a skill inside a conversation.
Why does the skill avoid 150 to 400ms animations?
SKILL.md says that range is fast enough to notice and slow enough to trigger symptoms. It offers two approaches instead: instant feedback at 0ms, or an extended duration of 500ms or more with minimal distance, so the movement is gentle.
Which WCAG criteria does it mention?
It lists three from WCAG 2.1: 2.3.3 Animation from Interactions at level AAA, where motion triggered by interaction can be disabled unless essential, 2.2.2 Pause, Stop, Hide at level A for moving content lasting over 5 seconds, and 2.3.1 Three Flashes at level A.
What does the skill replace squash and stretch with?
Opacity or color changes. SKILL.md gives the example of a button that darkens on press instead of compressing, and loading indicators that pulse opacity instead of bouncing. Anticipation becomes a static indicator, and exaggeration is removed entirely. SKILL.md lays this out in a table that pairs each of the 12 principles with a reduced-motion alternative.
Which motion patterns does it call harmful?
It lists parallax scrolling, background movement, zoom animations, spinning or rotating elements, fast repeated animations and large moving areas over a quarter of the viewport as potentially harmful. Auto-playing video backgrounds, infinite animations and flashing sit in its always-avoid list.
How many skills are in the animation-principles repository?
The README describes 144 Claude Code skills in 12 categories, with 12 skills in each set. accessible-motion sits in the 01-by-domain category. The README groups skills by application domain, role, tool or framework, emotional outcome and skill level, and the repository teaches Disney's 12 principles of animation.
What license does the repository use?
MIT. The README's License section reads MIT License and links to the LICENSE file, and a license badge at the top shows MIT. The accessible-motion skill sits inside that repository at skills/01-by-domain/accessible-motion, so the same MIT terms cover the skill folder.