ScreenshotNeo

BlogHow-to

How to Set a Screenshot API to Emulate a Reduced-Motion Preference

Use ScreenshotOne’s `reduced_motion=true` to emulate `prefers-reduced-motion: reduce`. Learn how it differs from actively pausing supported motion and how to verify the page’s response.

By the ScreenshotNeo team4 October 20265 min read

To ask ScreenshotOne to emulate a visitor who prefers reduced motion, add reduced_motion=true to its screenshot request. This sets the browser preference prefers-reduced-motion: reduce; the website decides what to do with it. It does not guarantee that every animation stops.

https://api.screenshotone.com/take?reduced_motion=true&url=https%3A%2F%2Fexample.com%2F&access_key=YOUR_ACCESS_KEY

This is ScreenshotOne’s documented parameter name. Other screenshot APIs may use different settings. For a more active, best-effort attempt to settle or pause supported motion, ScreenshotOne documents a separate option, reduce_motion=true.

1. Choose preference emulation or active motion reduction

Setting What it asks the browser or capture to do Use it when
reduced_motion=true Emulate prefers-reduced-motion: reduce. The page decides how to respond. You want to check the experience the site serves to visitors who prefer reduced motion.
reduce_motion=true Enable the preference and additionally attempt to finish finite CSS or Web Animations effects, pause looping animation and native media, and stop autoplay in supported animation libraries or sliders. You want supported motion settled or paused for a capture.

ScreenshotOne says motion reduction is best-effort. Custom JavaScript, canvas, animated images, and unsupported libraries may still move. Its documentation recommends not setting both parameters: reduce_motion already enables the preference. These are vendor-documented behaviors, not a guarantee for every page or browser.

2. Send the request

Replace the example URL and access key with your target and credential. URL-encode the target URL when constructing a request manually; the examples below let the client do that encoding.

cURL

curl -G 'https://api.screenshotone.com/take' \\
  --data-urlencode 'access_key=YOUR_ACCESS_KEY' \\
  --data-urlencode 'url=https://example.com/' \\
  --data-urlencode 'reduced_motion=true' \\
  -o reduced-motion.png

Python

import requests

response = requests.get(
    "https://api.screenshotone.com/take",
    params={
        "access_key": "YOUR_ACCESS_KEY",
        "url": "https://example.com/",
        "reduced_motion": "true",
    },
    timeout=90,
)
response.raise_for_status()
with open("reduced-motion.png", "wb") as image:
    image.write(response.content)

Node.js

const params = new URLSearchParams({
  access_key: 'YOUR_ACCESS_KEY',
  url: 'https://example.com/',
  reduced_motion: 'true',
});

const response = await fetch(
  `https://api.screenshotone.com/take?${params}`
);
if (!response.ok) {
  throw new Error(`Screenshot request failed: ${response.status} ${await response.text()}`);
}
const image = Buffer.from(await response.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('reduced-motion.png', image));

These examples show the documented request shape and client-side error handling; they do not claim a live request was made. Consult the ScreenshotOne API documentation for its current request details.

3. Check that the page honors the preference

The preference only helps if the site has behavior tied to the media feature. CSS commonly uses a media query such as:

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
  }
}

Site implementations vary: a page may simplify an effect, disable it, change transitions, or ignore the preference. Compare captures with and without emulation, and inspect the page’s CSS or behavior if the result is unchanged. Do not treat a reduced-motion preference as a universal animation freeze.

4. Other ways to emulate reduced motion

Workflow Setting Scope and caveat
Screenshot API ScreenshotOne: reduced_motion=true Hosted capture request that emulates the preference; page behavior remains site-dependent.
Playwright Test use: { reducedMotion: 'reduce' } Test configuration; the documented values are reduce and no-preference. The option was added in Playwright v1.50.
shot-scraper --reduced-motion CLI emulation option documented in version 1.4.
Chrome or Edge DevTools Rendering tool: emulate prefers-reduced-motion: reduce Manual inspection. Some animations may remain active, so inspect the actual page.
HTTP client hint Sec-CH-Prefers-Reduced-Motion Potential server-rendering signal, negotiated using Accept-CH; experimental and not broadly available, with cache variation considerations.

For Playwright, a minimal project configuration is:

// playwright.config.js
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    reducedMotion: 'reduce',
  },
});

For a page-level override, Playwright also provides page.emulateMedia({ reducedMotion: 'reduce' }). See the Playwright page API and test use options. The versioned shot-scraper 1.4 documentation describes its CLI option. For manual checks, see Chrome DevTools Rendering and Microsoft Edge Rendering tools. MDN documents the client hint and its compatibility limits.

5. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its documented API captures a URL in one GET request. The supplied ScreenshotNeo options do not include a reduced-motion emulation parameter, so use a browser workflow above when explicitly testing that preference.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the ScreenshotNeo API documentation. ScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture.

The free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is on every plan. Create a free ScreenshotNeo account.

6. Troubleshooting

Symptom Likely cause What to do
The page looks unchanged. The site does not implement the preference, or its relevant motion is not controlled by that media feature. Inspect its media-query behavior and compare with a no-preference capture. Try active reduction only if settling supported motion is the goal.
Some motion remains with reduced_motion=true. Preference emulation asks the site to respond; it does not pause animations or media. Use reduce_motion=true where supported, or inspect the remaining custom JavaScript, canvas, animated image, or media behavior.
Some motion remains with reduce_motion=true. The intervention is best-effort and support varies. For a controlled test, adjust the test page or animation setup. Do not assume every implementation can be paused by the capture service.
The request fails or returns an error. Common request issues include a missing or invalid access key, malformed URL encoding, or a target that cannot load. Check the key, encode the full target URL as a query parameter, and verify the target is reachable. Inspect the response status and body before saving it as an image.
The output file is not a usable image. An error response may have been written to the destination path. Check the HTTP status before writing bytes, as in the Python and Node.js examples.

7. Performance, reliability, and cost

Reduced-motion emulation is a browser preference, not a separate image-processing step. Capture time still depends on navigation and page readiness. If animations affect when the page is considered ready, choose an explicit wait condition appropriate to the site and keep it consistent across comparisons.

For repeatable results, record the target URL, preference setting, browser or tool version, and wait strategy. Dynamic content, timers, network responses, and site changes can alter screenshots even when the preference is fixed. A single capture cannot establish that all visitors or browser versions will see the same result.

Cost depends on the screenshot service and its plan; the reduced-motion documentation cited here does not state ScreenshotOne prices. ScreenshotNeo pricing is listed as 1,000 monthly free shots with no card, then $5 for 3,000, $15 for 15,000, $39 for 60,000, $99 for 250,000, or $249 for 1,000,000; yearly billing gives two months free. Its response indicates whether a page was billed.

8. FAQ

What is the exact CSS preference value?

The media feature is prefers-reduced-motion, and the reduced value is reduce.

Should I set both ScreenshotOne parameters?

No. Its documentation says reduce_motion already enables the preference and recommends not setting both.

Does reduced-motion emulation prove accessibility compliance?

No. It lets you inspect one preference state. You still need to evaluate the page’s motion, controls, and behavior against your accessibility requirements.