Accessible Motion

This maps Disney's 12 animation principles to accessible alternatives for users with vestibular disorders and motion sensitivity. You get a quick reference table showing how to replace each principle (squash and stretch becomes opacity changes, anticipation becomes static state indicators), plus CSS and JavaScript patterns for respecting prefers-reduced-motion. The timing guidance is smart: either instant (0ms) or very slow (500ms+), avoiding the 150-400ms range that's fast enough to notice but slow enough to trigger symptoms. It includes a WCAG compliance checklist and lists what's generally safe (subtle opacity fades, color transitions) versus what to always avoid (parallax, auto-playing backgrounds). Useful if you're building interfaces that need motion but can't assume everyone tolerates it.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill accessible-motion --agent claude-code