motion-sickness

Use when animation causes dizziness, nausea, disorientation, or vestibular discomfort

By dylantarre · 392 installs

npx skills add dylantarre/animation-principles --skill motion-sickness

Source repository · Upstream listing

Motion Sickness Prevention Eliminate vestibular triggers using Disney's principles safely. Problem Indicators Users report dizziness or nausea Disorientation during navigation Users avoid certain features Complaints increase with larger screens Parallax or zoom effects cause issues Dangerous Patterns These trigger vestibular responses: Large scale zoom animations Parallax scrolling (especially multi layer) Full screen rotations Rapid direction changes Continuous/looping background motion Scroll jacking Diagnosis by Principle Exaggeration Issue : Over dramatic motion Fix : Reduce scale of transforms. Max 10 20% size change. Avoid full screen zooms. Arcs Issue : Curved paths cause tracking strain Fix : Use linear motion for functional UI. Save arcs for small, optional elements only. Follow Through Issue : Overshooting creates whiplash effect Fix : Remove bounce/overshoot from navigation. Use critically damped springs or ease out. Secondary Action Issue : Multiple moving elements cause confusion Fix : Limit to one primary motion. Remove parallax layers. Slow In and Slow Out Issue : Acceleration patterns cause disorientation Fix : Use consistent, predictable easing. Avoid sudden speed changes. Quick Fixes 1. Respect prefers reduced motion Non negotiable 2. Remove parallax effects Common trigger 3. Avoid zoom transitions Use fades instead 4. Keep motion small Under 100px movement 5. No scroll jacking Let scroll be scroll Troubleshooting Checklist [ ] Does animation respect prefers reduced motion ? [ ] Is any element moving more than 100px? [ ] Are there any zoom effects? [ ] Is parallax present? Remove it. [ ] Are there continuous/looping animations? [ ] Can users pause or disable motion? [ ] Test on large display (motion amplified) [ ] Test for 5+ minutes continuously Safe Alternatives Triggering Safe Alternative Zoom transition Fade + slight scale (max 5%) Parallax scroll Static or single layer Rotation Fade or slide Bounce/spring Ease out (no overshoot) Full page slide Crossfade Code Pattern