motion-sensitivity

Name: motion-sensitivity
Author: Owl-Listener

82stars25forks

How to install motion-sensitivity?

owl-listener/inclusive-design-skills/motion-sensitivity

$npx -y skills add Owl-Listener/inclusive-design-skills --skill motion-sensitivity

Installs into the current project.

Summary

Design for people with vestibular disorders, motion sensitivity, or seizure conditions. Use when designing animations, transitions, parallax scrolling, video backgrounds, carousels, or any moving content. Triggers on: motion, animation, vestibular, motion sickness, dizzy, nausea,

Files · 1

View on GitHub

SKILL.md

1	# Motion Sensitivity Design
2
3	Design motion that serves function without causing harm. For people with
4	vestibular disorders, the wrong animation isn't just annoying — it can
5	trigger vertigo, nausea, migraines, or seizures that last hours or days.
6
7	## Who This Is For
8
9	- People with vestibular disorders (estimated 35% of adults over 40)
10	- People with migraine conditions triggered by visual motion
11	- People with photosensitive epilepsy (flashing triggers seizures)
12	- People experiencing concussion recovery
13	- People with anxiety disorders (unexpected motion increases stress)
14	- Anyone experiencing motion sickness
15
16	## Dangerous Motion to Avoid
17
18	### Never Use
19	- Flashing content faster than 3 times per second (seizure risk —
20	this is a WCAG Level A requirement, not optional)
21	- Large-area flashing in any colour (even at slower rates)
22	- Strobing or pulsing effects
23
24	### Use With Extreme Caution
25	- Parallax scrolling (triggers vestibular responses)
26	- Scroll-jacking (overriding native scroll behaviour)
27	- Zoom animations that scale the full viewport
28	- Spinning or rotating elements
29	- Auto-advancing carousels or slideshows
30	- Background video
31
32	## Design Patterns
33
34	### Respect prefers-reduced-motion
35	This is the minimum. Non-negotiable.
36
37	When prefers-reduced-motion is set:
38	- Replace animated transitions with instant state changes
39	- Stop all autoplay video and animation
40	- Disable parallax effects
41	- Disable scroll-triggered animations
42	- Keep essential motion only (loading indicators) and simplify them
43
44	### Motion Budget
45	Not all motion is equal. Allocate motion deliberately:
46	- Essential motion: loading spinners, progress bars, state
47	transitions that communicate meaning. Keep these but simplify.
48	- Helpful motion: hover effects, subtle transitions that aid
49	understanding. Keep but make instant when reduced motion is on.
50	- Decorative motion: background animations, entrance effects,
51	parallax. Remove entirely.
52
53	### Safe Animation Principles
54	- Keep animations short (under 300ms for transitions)
55	- Use opacity and colour changes instead of position changes
56	where possible (less vestibular impact)
57	- Avoid animating large areas of the screen simultaneously
58	- Provide play/pause controls on all moving content
59	- Never autoplay anything — let the user opt in
60
61	### Video and Moving Backgrounds
62	- Never autoplay with motion — show a static poster image first
63	- Provide a visible pause/stop button
64	- If background video is used: offer a static alternative
65	- Ensure content is fully readable with video paused
66
67	## Assessment Questions
68
69	1. Does the interface respect prefers-reduced-motion?
70	2. Is there any flashing content faster than 3 times per second?
71	3. Can all animations be paused, stopped, or hidden?
72	4. Does any content autoplay with motion?
73	5. Are parallax or scroll-triggered animations present? Do they
74	have a static alternative?

People who liked this also viewed

6 picks

Type

motion-sensitivity

82stars25forks

View on GitHub

How to install motion-sensitivity?

owl-listener/inclusive-design-skills/motion-sensitivity

$npx -y skills add Owl-Listener/inclusive-design-skills --skill motion-sensitivity

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Motion Sensitivity Design
2
3	Design motion that serves function without causing harm. For people with
4	vestibular disorders, the wrong animation isn't just annoying — it can
5	trigger vertigo, nausea, migraines, or seizures that last hours or days.
6
7	## Who This Is For
8
9	- People with vestibular disorders (estimated 35% of adults over 40)
10	- People with migraine conditions triggered by visual motion
11	- People with photosensitive epilepsy (flashing triggers seizures)
12	- People experiencing concussion recovery
13	- People with anxiety disorders (unexpected motion increases stress)
14	- Anyone experiencing motion sickness
15
16	## Dangerous Motion to Avoid
17
18	### Never Use
19	- Flashing content faster than 3 times per second (seizure risk —
20	this is a WCAG Level A requirement, not optional)
21	- Large-area flashing in any colour (even at slower rates)
22	- Strobing or pulsing effects
23
24	### Use With Extreme Caution
25	- Parallax scrolling (triggers vestibular responses)
26	- Scroll-jacking (overriding native scroll behaviour)
27	- Zoom animations that scale the full viewport
28	- Spinning or rotating elements
29	- Auto-advancing carousels or slideshows
30	- Background video
31
32	## Design Patterns
33
34	### Respect prefers-reduced-motion
35	This is the minimum. Non-negotiable.
36
37	When prefers-reduced-motion is set:
38	- Replace animated transitions with instant state changes
39	- Stop all autoplay video and animation
40	- Disable parallax effects
41	- Disable scroll-triggered animations
42	- Keep essential motion only (loading indicators) and simplify them
43
44	### Motion Budget
45	Not all motion is equal. Allocate motion deliberately:
46	- Essential motion: loading spinners, progress bars, state
47	transitions that communicate meaning. Keep these but simplify.
48	- Helpful motion: hover effects, subtle transitions that aid
49	understanding. Keep but make instant when reduced motion is on.
50	- Decorative motion: background animations, entrance effects,
51	parallax. Remove entirely.
52
53	### Safe Animation Principles
54	- Keep animations short (under 300ms for transitions)
55	- Use opacity and colour changes instead of position changes
56	where possible (less vestibular impact)
57	- Avoid animating large areas of the screen simultaneously
58	- Provide play/pause controls on all moving content
59	- Never autoplay anything — let the user opt in
60
61	### Video and Moving Backgrounds
62	- Never autoplay with motion — show a static poster image first
63	- Provide a visible pause/stop button
64	- If background video is used: offer a static alternative
65	- Ensure content is fully readable with video paused
66
67	## Assessment Questions
68
69	1. Does the interface respect prefers-reduced-motion?
70	2. Is there any flashing content faster than 3 times per second?
71	3. Can all animations be paused, stopped, or hidden?
72	4. Does any content autoplay with motion?
73	5. Are parallax or scroll-triggered animations present? Do they
74	have a static alternative?

People who liked this also viewed

6 picks

Type