Designers
ToolsDocsProAll the Possibles

All 141 tools / Motion

Find autoplay, endless loops, possible flashing and long transitions, and get reduced-motion CSS to paste.

Motion checkFreeFor developers and designers

30/day

free runs a day, no sign-in.

Before: what you give it

The example input, as typed in. You give it a page address.

css:
  .hero { background-attachment: fixed; animation: drift 12s linear infinite; }
  @keyframes drift { from { transform: translateX(0); } to { transform: translateX(-400px); } }
  .badge { animation: blink 0.25s steps(1) infinite; }
  @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } }
  .card { transition: transform 0.8s ease; }
  .card:hover { transform: translateY(-120px) scale(1.6); }
  html { scroll-behavior: smooth; }
html: <section class="hero"><video autoplay muted loop src="bg.mp4"></video><marquee>Sale ends soon</marquee></section>

After: what comes back

The first lines of a real run on that input. Nothing here is edited by hand.

Motion check of pasted markup: 9 findings (4 high, 3 medium, 1 low, 1 advisory).
Found 2 animations (2 infinite), 1 transitions, 0 rules inside prefers-reduced-motion. Reduced motion: not honoured.

[HIGH] WCAG 2.2.2 Pause, Stop, Hide (A): 1 video autoplay
  Autoplaying video that runs over 5 seconds needs a pause control, even when muted. 1 has no controls attribute, so a keyboard or screen reader user has no built-in way to stop them. Looping background video is the common offender.
  Seen in: <video autoplay muted loop>
  Fix: Remove autoplay, or add a visible pause button wired to video.pause(). Under prefers-reduced-motion, do not start it at all (check matchMedia in script).

[HIGH] WCAG 2.2.2 Pause, Stop, Hide (A): 1 <marquee> element
  <marquee> is obsolete and cannot be paused by the user.
  Seen in: <marquee>
  Fix: Replace it with static text, or a CSS animation that has a pause control and stops under prefers-reduced-motion.

[HIGH] WCAG 2.3.1 Three Flashes or Below Threshold (A): 1 fast repeating animation could flash
... full output on the tool page

What you get

Findings with WCAG criterion, severity and fix, a verdict on prefers-reduced-motion, and a CSS block

What it cannot do

Reads source only: it cannot measure flash rate or render the page, and fetches up to 4 same-site stylesheets.

Who it is for

  • Developers
  • Designers

Free and Pro

Free30 runs a day per IP address, up to 200,000 characters a run.
ProNo daily limit, 300 requests a minute, up to 200,000 characters a run.

What each plan includes

Use it from your assistant

The tool is called check_motion. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.

claude mcp add --transport http designers https://designers.allthepossibles.com/mcp
curl -X POST https://designers.allthepossibles.com/api/motion-check -H 'content-type: application/json' -d '{"css":".hero { background-attachment: fixed; animation: drift 12s linear infinite; }\n@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-400px); } }\n.badge { animation: blink 0.25s steps(1) infinite; }\n@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } }\n.card { transition: transform 0.8s ease; }\n.card:hover { transform: translateY(-120px) scale(1.6); }\nhtml { scroll-behavior: smooth; }","html":"<section class=\"hero\"><video autoplay muted loop src=\"bg.mp4\"></video><marquee>Sale ends soon</marquee></section>"}'

Try it here

The form starts with the same example input, so you can run it first and then swap in your own.

More in motion

All motion tools