MCP server · Developer tools
MotionSpec MCP server
Check and build web animations that respect reduced-motion settings and accessibility rules.
MotionSpec is a helper for web animations. It checks that the moving parts on a page are safe for people who get dizzy or sick from motion, and it can turn a simple description of an animation into ready-to-use code. It is handy if you build or review websites and want the animations to follow accessibility rules without becoming an expert in them.
What is an MCP server? The 30-second version
On its own, your AI can only chat with you. An MCP server is a small helper program that gives your AI a new skill or a connection to a service. This one connects your AI to MotionSpec, a tool that checks and builds web animations. So when you ask your AI to make or check an animation, it can actually do the work through MotionSpec and hand you back real code or a report.
What this MCP server does
You describe the animation you want, or paste in an animation file you already have. Your AI sends that to MotionSpec. MotionSpec checks it against a fixed list of safe animation building blocks and against accessibility rules, then either tells you exactly what is wrong or builds clean code for you. You get the result back in your chat as code files or a list of problems with fixes.
Click to zoomWhat you can do with it
- Check whether an animation file follows the rules before you use it
- Build reduced-motion-safe animation code from a plain description
- Scan a live web page for motion that could bother people
- See the list of approved animation building blocks you can use
- Get clear error messages with the exact spot that needs fixing
- Add a pause or stop button to looping animations automatically
Try asking your AI
- “Check this animation file and tell me what is wrong with it”
- “Build me a fade-in animation for my homepage that is safe for reduced motion”
- “Audit this page for motion accessibility problems: https://example.com”
- “Show me the list of animation building blocks I am allowed to use”
What it gives back to you
You get back either a report or code. The report lists each problem with the exact part of the page it is on, the accessibility rule it breaks, and a copy-paste fix. When it builds an animation, it gives you plain JavaScript and CSS files you can save and use. If everything passes, it tells you the page is reduced-motion-safe.
Before you start
What you need
- Node.js 18 or newer if you want to run it on your own computer
- An MCP host like Claude Code or the Claude desktop app
- Nothing else for the basic checking tools, they are free and need no key
Good to know
The page scan is a static check of the HTML and stylesheets only, so it does not catch motion created by JavaScript at runtime, and a clean result does not mean the whole page is accessible.
Install it with your AI
Add MotionSpec MCP server to your AI, no technical skills needed
You don't install anything by hand. You copy one prompt, paste it into an AI that can work on your computer, and it checks, installs and connects the server for you, asking you when it needs something.
Sign in to get the install prompt
Members get a ready-made prompt that lets the Claude desktop app check MotionSpec MCP server, install it and connect it for them, step by step. You don't need any technical skills: you copy, paste and answer a few questions. Your connected AI can also find and install any of the 4,066 MCP servers here for you.
Who it's for
Web developers, designers, and anyone who reviews websites and wants animations to be accessible without learning all the rules.
