Canonical: https://motionspec.dev/ Motion control for web agencies # Every loop needs a pause button. Paste a client URL. See which CSS loops visitors can’t pause and which animations ignore their reduced-motion setting, each with the selector and a copy-paste fix. Then keep a dated record for the handoff. Client website URL Check a page for free No signup · No automatic changes to your site See a real sample report Try the pause button Pause & resume CSS loops Respect reduced motion ● ● ● motionspec / live motion The choice is yours Let it flow. Or let it stop. Scroll once to start. Move over the ribbon to pause. WAITING FOR YOUR SCROLL ↘ Ⅱ Less motion. More control. MotionSpec is a motion accessibility checker for web agencies. It scans a live page’s CSS for loops with no pause path (WCAG 2.2.2, Level A) and for motion outside a prefers-reduced-motion guard, and gives a copy-paste fix for each finding. It reads static CSS; runtime JavaScript motion is out of scope. 65.1%of 186 measurable AI-built apps ran a loop that could not be paused 96.8%of the same 186 apps shipped without a reduced-motion guard 2 of 186came back clean on all four checks Freefirst check: no signup, no changes to your site From our 196-site study of AI-generated production apps (measured July 2026, re-measured with the September 2026 method). Method and open dataset . The gap in a polished handoff ## It looks finished. Does it respect less motion? Visual QA can miss motion that continues when a visitor asks for less. The question is simple: what should your team review before the next release? 01 / THE LOOP ### Movement with no way out. A looping banner, marquee or decorative animation may keep moving without a pause path your CSS exposes. 02 / THE PREFERENCE ### Less motion, still ignored. Animations and transitions can remain active when a visitor has enabled reduced motion on their device. 03 / THE HANDOFF ### “We checked it” needs context. A dated record of the URL, findings and scan limits gives the next developer something concrete to work with. A small button. A better experience. ## Pause the loop. Feel the control. Websites move. Visitors should get a say. Scroll into this demo, then give the moving names a moment of quiet. The names stay readable, with or without motion. Start animation Compare motion on / off ChatGPT Claude Gemini Cursor Lovable Bolt v0 Replit Framer Webflow Examples from the web-building ecosystem. No affiliation implied. View all names ChatGPT · Claude · Gemini · Cursor · Lovable · Bolt · v0 · Replit · Framer · Webflow The difference you can see ### Motion should come with a choice. Put visitors in control of CSS loops. Then check the motion your team ships. Compare motion on / off to sample responsiveness on this device. Demo loops running 0 0 out of 1Static until you choose to start. Check a page for free Add Motion Guard to WordPress Less ongoing work. Measured honestly. ### Does pausing make this page smoother? Try a short comparison on your device. We measure frame timing with the loop moving, then paused. This lightweight loop may already run smoothly. 4 seconds moving · 4 seconds paused · Runs locally Loop moving —ms Loop paused —ms 95th-percentile frame interval · Lower is better No scores invented. Run the comparison to see your result. What this comparison tells you Frame intervals are sampled with requestAnimationFrame for four seconds in each state. The 95th percentile describes the slower end of those intervals. Background activity, refresh rate and device conditions affect the result; one short run does not establish cause and effect. This comparison is not a load-speed, CPU, LCP, INP or CLS measurement. A pause does not undo page loading. The comparison adds no simulated workload and promises no improvement. This page: loading and motion ### What loading measured. What motion keeps adding. Motion has not started yet. Scroll to wake it, then pause it with the otter. Measured on your visit Measured Server response (TTFB)— First contentful paint— Largest contentful paint— Page fully loaded— Transferred— Read from your browser’s own timing data for this page view. Loading has already happened, so a pause does not change these values. Ongoing motion work Simulation Right now 0 ms modelled main-thread motion work per second Modelled for the motion on this page. Updates when you pause or resume. Value Motion running Paused Animated layers active — 0 Frames drawn for motion per second — 0 Main-thread motion work per second — 0 ms Share of each frame budget — 0.0 % Motion work per minute on the page — 0 ms How the simulation works Counted in your browser: the animations currently running on this page and your screen’s refresh rate. Assumed: main-thread cost per animated layer and frame of 0.05 ms for transform or opacity, 0.4 ms for properties that repaint and 1.2 ms for properties that change layout. The result is an estimate for this page, not a measurement of CPU, battery, Core Web Vitals or rankings. This is a model of this page. For a client site, the free check lists the CSS motion behind this kind of ongoing work, and the Motion Report documents it with a date. Neither one measures load speed. Check a page for free Motion Report · $29 Good page experience matters. A pause button is one part of it—not a Google ranking promise. Google’s guidance on page experience Watch the English product video . 45 seconds · English ## See MotionSpec in action. A free check surfaces the candidates. Your team reviews the fixes. The report records what was checked and when. Check a page for free Open the sample report Read the video transcript Managing client websites? Your margins shouldn't shrink with every update. MotionSpec flags CSS motion risks and helps your team focus its review. See the finding in context, with dated reports to guide your team's review. At $150 an hour, two specialist hours cost $300. (On screen: an example of review cost — illustrative, not promised savings.) MotionSpec Agency: $249 a month. Weekly motion checks and dated reports for up to 10 domains. End card: Trust your motions. Try it on one client site ## See what your CSS reveals. Client website URL Check a page for free No signup · No automatic changes to your site Two motion treatments. Illustration, not a measured scan result. From a concern to a next step ## Find it. Understand it. Check it again. 01 ### Scan a live page. Start with one client URL. MotionSpec reads the CSS it can access. 02 ### Review the candidates. See the selectors, root causes and suggested fixes. Confirm the behavior in the browser. 03 ### Keep a dated record. Apply and test your changes, re-check the page and use a report for your handoff. Check a page for free Explore the before-and-after demo See the deliverable before you buy ## A report your team can act on. The useful part is the detail: where the candidate appears, why it was flagged and what to review next. Named selectors and grouped root causes Suggested CSS fixes for developer review Check date, URL and explicit coverage limits A browser report you can print to PDF Explore the sample report One URL report · $29 $29 once for one URL · 14-day refund policy · Read the terms Inside a real MotionSpec report ACTUAL PRODUCT Product screenshot from MotionSpec’s own demo. Findings can change between scan dates. Built for the agency care plan ## The handoff ends. Your client sites keep changing. Give ten selected client domains a repeatable motion-checking workflow, with weekly homepage re-checks and dated reports. $249/month Up to 10 domain slots Cancel anytime 30-day first-month promise See the Agency plan Compare all plans Managing 50+ sites? Start with ten selected domains. The standard plan does not cover your full portfolio automatically. A few things to know ## Clear scope. Clear answers. What does MotionSpec actually check? MotionSpec reads a page’s linked CSS and inline style blocks. It flags CSS motion candidates such as infinite loops without a visible pause path and missing reduced-motion guards. It identifies candidates for review; your team checks them in context. Does it fix the website automatically? The free check shows candidates and suggested fixes. Motion Guard for WordPress can add a reduced-motion guard and an optional CSS pause/resume control when installed and enabled. Your team still tests the site. Runtime JavaScript motion needs separate handling. Is this a full accessibility audit? No. The scan covers specific CSS motion criteria and best practices mapped to WCAG 2.2.2 and 2.3.3. It is not a full accessibility audit and not a compliance verdict. It does not assess all accessibility requirements, certify compliance, or audit runtime JavaScript and GSAP motion. Flashing content is outside the scan. What does the Agency plan include? The Agency plan is $249 per month for up to ten domain slots, with weekly homepage re-checks, dated reports and keyed developer tools. This is homepage coverage for the selected domains, not a crawl of every page on every client site. We manage more than 50 sites. Is this for us? You can start with ten selected client domains, for example sites under an active care plan. The standard Agency plan includes ten slots. Larger portfolio coverage needs separate terms; do not assume the standard plan covers all 50 sites. Can I start without a subscription? Yes. The free motion check requires no signup. A Motion Report for one URL is $29 once. You can choose the Agency plan when you need a recurring workflow across selected client domains. Does pausing a loop improve Google rankings? A pause can stop ongoing animation work, but the effect on responsiveness depends on the animation and device. Our demo compares local frame intervals; it does not measure loading speed or Core Web Vitals. Google uses multiple ranking signals. A pause button alone is no guarantee of higher rankings. Go deeper when you need to ## The practical motion library. The MotionSpec MIT core checks and compiles UI animation in AI-generated web apps. It includes 40 reviewed motion primitives and 302 automated tests, with CLI and MCP tools for Node.js. A reduced-motion fallback and a performance budget are on by default, with documented configuration options and limitations. Hosted keyed tools for one developer domain: Dev Key, $39/month . Explore the developer tools or inspect the source . ### Reduced motion, explained. Understand the CSS preference and how to test your implementation. ### A better client handoff. Make motion findings part of an actionable engineering record. ### For your development team. Explore the open core, CLI, MCP tools and compiler separately. Your next handoff starts here ## Make motion part of your quality check. Start with one client URL. See what the CSS reveals, then choose the level of evidence and follow-up you need. Check a page for free Explore the Agency plan No signup for the free check. No automatic changes to your site. ## Your visit, in numbers The page shows your pause-button presses, ribbon-hover pauses and ribbon taps separately for this browser tab. These are local visitor interactions, not aggregated customer or performance statistics.