Accessible CSS animation, without the guesswork.
Paste your URL and MotionSpec shows you every CSS animation that quietly breaks motion accessibility — checked against WCAG 2.2.2 (Pause, Stop, Hide) and WCAG 2.3.3 — each with the exact fix. Free, no signup, nothing stored.
Across 196 AI‑built apps we measured on 16 Jul 2026, 66.3% ran a loop you can’t pause (WCAG 2.2.2, Level A) and 96.9% shipped no reduced‑motion guard. This is the tool that tells you whether yours is one of them — and how to fix it.
To be precise: MotionSpec verifies and compiles UI animation in AI-generated web apps — it does not generate AI video.
Your animations look great — so why would they fail an accessibility check?
Motion slop is animation that ships broken by default — no prefers‑reduced‑motion guard, or an infinite loop with no way to pause it — and to a visitor with a vestibular disorder it can mean real nausea, dizziness or migraine, not just a design nitpick. The Level‑A failure an auditor actually writes up is WCAG 2.2.2 (Pause, Stop, Hide): motion that starts on its own, runs more than five seconds and loops, with no control to stop it.
“No time — I’ll just add a media query” is the right instinct. But one @media (prefers-reduced-motion: reduce) block is easy to miss a keyframe in, and it does nothing about that unpausable loop. You can’t eyeball which of your @keyframes and transitions are actually covered. A scan can — in about ten seconds.
What exactly does the free check catch?
The free motion check is a static scan of any URL’s linked CSS and <style> blocks against WCAG 2.2.2 (Pause, Stop, Hide) and WCAG 2.3.3 (Animation from Interactions), returning every CSS‑motion issue it flags with a copy‑paste fix. It’s the same MIT engine MotionSpec runs — not a mock.
Drop in any URL
No signup, nothing stored. We fetch the page’s linked CSS and inline <style> and scan it statically — seconds, not a crawl.
Findings grouped by root cause
Every issue is mapped to WCAG 2.2.2 or 2.3.3 and grouped by the rule it breaks, so you fix the cause once instead of chasing dozens of selectors.
Copy the exact CSS
Each finding ships with a copy‑paste fix — usually the missing @media (prefers-reduced-motion: reduce) guard or a pause hook. Then npm i motionspec to keep new motion clean.
Static scan of linked CSS + <style> only. Not a full accessibility audit, not a compliance verdict; runtime JS/GSAP motion isn’t covered. Nothing is stored.
See every motion issue we can spot in your CSS — free.
The free motion check scans your linked CSS against WCAG 2.2.2 (Pause, Stop, Hide — Level A) and WCAG 2.3.3, and shows every CSS‑motion issue it flags with a copy‑paste fix. Want it human‑verified, cited and benchmarked against 196 AI‑built sites? The €29 Motion Report is refundable within 14 days, no questions.
A detection check — we find and show the issues; we never promise to make your site compliant. How the check works →
How common is quietly‑broken motion, really?
In a 196‑app study MotionSpec published on 16 Jul 2026, 66.3% of AI‑generated production apps shipped an unpausable loop (WCAG 2.2.2, Level A) and 96.9% shipped motion with no reduced‑motion guard (WCAG 2.3.3 — a best‑practice gap, never an A/AA failure). Only 3.1% came back clean, so the odds your site has something worth fixing are high.
ran a loop with no way to pause (WCAG 2.2.2 Pause, Stop, Hide · Level A)
shipped motion with no reduced‑motion guard (WCAG 2.3.3 — a best‑practice gap, not an A/AA fail)
median distinct motion root causes per app
came back clean
We build the tool that fixes this, so we published the method and the raw data — check our work. Read the study & open dataset →
Honest scope: a static scan is a lower bound — it reads your CSS, not runtime JS or GSAP. We say the motion we compile is “reduced‑motion‑safe by construction,” never “guaranteed accessible.”
What do you actually get — measurably?
MotionSpec turns “is my motion OK?” into three numbers you can check on your own site.
problems on the typical site — see yours free, in ~10s
Paste any URL: a count of motion problems, each with a copy‑paste fix, and where you rank against the 196 real sites we measured. No signup — provable on your own site right now.
sites with no “reduce‑motion” fallback → yours covered
96.9% of the sites we measured ship animation with no fallback for people who’ve set their device to “reduce motion.” MotionSpec gives every animation that calm fallback — so you stop turning those visitors away.
lighter, faster pages (one measured pilot)
The heavy, always‑on motion we flag is the same stuff that makes pages stutter and drain battery — so clearing it is two‑for‑one: more accessible AND lighter. In our first real deployment, the main content appeared in ~1.0s instead of 1.8s and the performance score rose 71→90.
You don’t have to take our word for it — the method and raw data behind the first two numbers are published in full, so you can check them yourself. The speed figures are from one measured deployment, shown as an example — not a promise.
What’s the fastest way to actually fix it?
Start free: scan the URL, copy the fixes, and npm i motionspec so new animation is reduced‑motion‑safe by construction. When you need it in writing — for a client, a boss, or an audit — the paid steps are right‑sized and reversible, never a compliance promise.
npm + free MCP
Compose from 40 verified primitives, or wire the keyless motion_validate tool into your AI coding agent. Connect it →
Motion Report
One URL, human‑verified, WCAG‑cited, your percentile vs the 196‑site study. PDF in ≤1 business day — refundable within 14 days, no questions. Get the report →
Dev Key
Keyed MCP + API: compile, audit and signed certificates in CI. Cancel anytime. Get a key →
Developer questions about accessible motion.
How do I test prefers-reduced-motion?
You can test prefers-reduced-motion three ways: toggle “Reduce motion” in your operating system’s accessibility settings, emulate prefers-reduced-motion: reduce in your browser DevTools rendering panel, or paste your URL into MotionSpec’s free motion check, which flags every @keyframes and transition that isn’t wrapped in an @media (prefers-reduced-motion: reduce) guard and shows the fix.
Run it: motionspec.dev/motion-check · background: the prefers-reduced-motion guide.
How do I add reduced motion to GSAP?
GSAP animations run in JavaScript, so a static CSS scan — including MotionSpec’s free check — can’t see them. To make them reduced-motion-safe, gate them behind the user’s preference: GSAP’s gsap.matchMedia() lets you register a “(prefers-reduced-motion: reduce)” context that runs a calmer variant, or none, so the animation respects the visitor’s OS setting.
Is missing prefers-reduced-motion a WCAG failure?
No. A missing prefers-reduced-motion guard maps to WCAG 2.3.3 Animation from Interactions, a best-practice (AAA-scoped) criterion — not an A or AA failure. The Level A failure to watch is WCAG 2.2.2 Pause, Stop, Hide: motion that starts automatically, runs more than five seconds and loops, with no way to pause, stop or hide it. In our 196-app study 96.9% lacked a reduced-motion guard (2.3.3), but 66.3% shipped that unpausable loop (2.2.2, Level A).
What does the free check cover?
The free motion check statically scans one page’s linked CSS and inline <style> blocks against WCAG 2.2.2 (Pause, Stop, Hide) and WCAG 2.3.3 (Animation from Interactions), showing each finding with a copy-paste fix. It is not a full accessibility audit and not a compliance verdict; runtime JS and GSAP motion aren’t covered, and nothing you submit is stored.
Scan your site free.
Paste your URL, see every CSS‑motion issue it flags with its fix, and copy what you need — no signup, nothing stored.
Shipping client sites? For agencies → · Building a platform? For platforms → · EAA‑exposed? For enterprise →