# Guides: index

Canonical: https://motionspec.dev/blog/

Guides — web motion accessibility, explained — MotionSpec

MotionSpec
← motionspec.dev

Guides

## Web motion accessibility, explained.

Practical, tool-independent writing on the animation layer of the web: what breaks, why generated motion breaks it faster, and how to verify it against WCAG — with code that passes. New guides land here.

## All guides

- State of Motion in AI-Generated UIs: 196 sites tested (2026) — https://motionspec.dev/blog/state-of-motion-ai-generated-uis — 196 AI-generated production apps scanned for motion accessibility: 53.9–77.2% run loops you can't pause (WCAG 2.2.2, Level A) and 90.1–100% ship motion with no reduced-motion guard; six were clean. Method + open dataset. (2026-07-18 · Study)
- Top WAVE alternatives for UI motion testing (2026) — https://motionspec.dev/blog/wave-alternatives-ui-motion-testing — A transparent, nofollow comparison of tools teams weigh alongside WAVE — MotionSpec, Tabnav, Pluro and AAArdvark — by approach, best fit and pricing. (2026-07-17 · Comparison)
- prefers-reduced-motion, explained (and how to test it) — https://motionspec.dev/blog/prefers-reduced-motion — What the media query is, the CSS and JavaScript patterns that actually pass, four ways to test it, and how it maps to WCAG 2.2.2 and 2.3.3. (2026-07-14 · Guide)
- What is motion slop? — https://motionspec.dev/blog/what-is-motion-slop — Generated animation that ships broken by default: no reduced-motion guard, infinite attention loops, off-budget effects, hallucinated APIs. Definition, causes, detection, fixes. (2026-07-07 · Explainer)
- How to detect and fix motion slop — https://motionspec.dev/blog/detect-motion-slop — A tool-independent triage in minutes: the OS reduced-motion toggle plus a handful of grep commands, then the fix for each defect class. (2026-07-10 · Guide)
- How to verify web motion accessibility — https://motionspec.dev/blog/verify-web-motion-accessibility — A step-by-step process: inventory motion sources, test prefers-reduced-motion for real, check WCAG 2.2.2, 2.3.1 and 2.3.3 with correct levels, apply code patterns that pass. (2026-07-07 · Guide)
- What is a11y? Accessibility explained — and the motion gap — https://motionspec.dev/blog/what-is-a11y — A11y is the numeronym for accessibility: what it means, who it serves, the concrete advantages — and the motion layer most a11y advice never covers. (2026-07-13 · Explainer)
- x402 explained: how AI agents pay per API call — https://motionspec.dev/blog/x402-agentic-payments — x402 is an open payment standard on HTTP 402: wallet-signed, per-call stablecoin payments for agents — no accounts, no API keys. (2026-07-13 · Explainer)
- How to add the MotionSpec MCP to Claude — https://motionspec.dev/blog/install-motionspec-mcp-claude — One URL, no API key: setup in Claude Code, Claude Desktop or Cursor in two minutes — and how motion_catalog and motion_validate stop hallucinated animation. (2026-07-13 · Guide)
- Why a motion spec cuts token costs and hallucinations — https://motionspec.dev/blog/reduce-token-costs-hallucinations — Three mechanisms, no magic: a small spec instead of generated animation code, fail-closed validation against a 40-primitive allow-list, deterministic and cacheable compilation. (2026-07-13 · Explainer)

Want the CSS part automated? The free motion check (https://motionspec.dev/motion-check) scans any URL against WCAG 2.2.2 and 2.3.3 — no signup, nothing stored.

Want to see it in motion? Compare it in the before / after demo (https://motionspec.dev/before-after).

Generating web UI at scale? See the Design Partner Program.

MotionSpec checks and compiles UI animation for AI-generated web apps — it does not generate AI video.

MotionSpec About Free motion check npm MCP docs Pricing Impressum Datenschutz

MotionSpec enforces reduced-motion safety and a performance budget for the motion it compiles; it is not a general accessibility guarantee and does not claim conformance with any specific accessibility law. © 2026 Fröba Sales Solutions UG (haftungsbeschränkt).