Screenshot API · Use case

Take an animated screenshot of any website

An animated screenshot records a page as a short video instead of a single frame. Some pages only make sense while they move: a WebGL scene, a scroll-driven landing page, a loading sequence, a chart that animates in. A still frame reports one arbitrary moment of it. Set one option and the Screenshot API opens the page in a real browser, records it, and returns a hosted MP4 or WebM alongside the still image.

Open the Screenshot API

The problem

A still image cannot show a page that moves

Screenshot APIs return one frame. For a static document that is the whole page. For a product hero with a scroll animation, a canvas demo, or a dashboard that fills in as data arrives, one frame is a coin flip: you get the page mid-transition, or before the content settles, or after the motion has already finished.

The usual answer is to record it yourself. That means driving a headless browser, attaching a screencast session, collecting frames, then running them through a video encoder, and keeping all of it alive on your own machines. The output is a video file you now have to host.

The screenshot.animated option replaces that pipeline with one option on the request you already send. The browser records the page as it plays and the response carries a hosted video URL next to the usual still image, so a capture and a recording cost the same single call.

Open a live recording of a WebGL page

How it works

How to record an animated screenshot

Set animated to true for the defaults, or pass an object to set the length, the frame rate and the container. Recording starts at navigation, so the opening moments show the page loading before the content settles.

1 · Record with the defaults

import createClient from 'microlink.io'

const microlink = createClient({
  apiKey: process.env.MICROLINK_API_KEY
})

const { animated } = await microlink.screenshot('https://example.com', {
  animated: true
})

console.log(animated.url, animated.type)

Five seconds at 30 fps, encoded as H.264 MP4. The response still carries the regular image, so one request gives you both a poster frame and the video.

2 · Set length, frame rate and container

import createClient from 'microlink.io'

const microlink = createClient({
  apiKey: process.env.MICROLINK_API_KEY
})

const { animated } = await microlink.screenshot('https://example.com', {
  animated: { duration: '8s', fps: 60, type: 'webm' }
})

duration accepts milliseconds or the 8s form and tops out at 10 seconds. fps tops out at 60. type is mp4 for H.264 or webm for VP9.

3 · Let the CSS motion play

import createClient from 'microlink.io'

const microlink = createClient({
  apiKey: process.env.MICROLINK_API_KEY
})

const { animated } = await microlink.screenshot('https://example.com', {
  animated: { duration: '6s' },
  animations: true
})

CSS animations and transitions are off by default, which keeps still captures identical between runs. A recording of CSS-driven motion needs them on, so set animations to true.

4 · The same recording as a URL

curl 'https://api.microlink.io/?url=https%3A%2F%2Fexample.com&screenshot.animated=true&meta=false&embed=screenshot.animated.url'

With embed the response body is the video itself rather than JSON, so this URL goes straight into the src of a video tag, as the delivery and embedding guide shows for images. It works on the free endpoint with no API key.

Parameters used

screenshot.animated Records the page instead of capturing it. Takes true, or an object with duration (default 5000, max 10000), fps (default 30, max 60) and type.
animations Enables CSS animations and transitions, which are disabled by default. Also drives prefers-reduced-motion in the page.
embed Returns the video bytes instead of JSON when set to screenshot.animated.url.
device Records at a named device preset. Applies to the whole request, so the recording uses that viewport and user agent.
ttl Controls how long the hosted recording is reused before the page is recorded again.

The recording captures the viewport, not the full scrollable page, so frame what you want with a viewport or a device preset. For motion that starts late, give it a longer duration rather than a wait: the clock starts at navigation.

Why it works

Why record on the API instead of in your own browser fleet

A recording is a screenshot with a time axis. Treating it as one request option is what keeps it cheap to produce and cheap to serve.

01 · One request

No screencast pipeline to operate.

Driving a browser, attaching a screencast, buffering frames and encoding them is several moving parts and a machine to run them on. Here it is one option on a request, and the encoded video comes back hosted and cached.

The still image arrives in the same response, which is what you want for the poster attribute of a video tag. To preview a recording before writing code, try the animated screenshot tool.

02 · Composable

Every other browser setting still applies.

A recording is not a separate product. Emulate a phone, force a color scheme, block cookie banners, click something first, then record the result. The options compose exactly as they do for a still capture.

Pair it with device emulation to record the mobile version, or with a dark theme for the dark variant.

03 · Bounded

Short clips, predictable weight.

Ten seconds is the ceiling, and frame rate and container are yours to choose. H.264 plays everywhere; VP9 in WebM trades compatibility for size. Both are far lighter than the GIF people reach for first.

When not to: for a long page or a flow with many steps, a recording is the wrong tool. Capture the whole page as a still with fullPage or script the steps with a browser function.

FAQ

How do I record a website as a video with an API?

Send a screenshot request with animated set to true. The page is opened in a real browser, recorded for five seconds at 30 fps by default, and the response carries a hosted MP4 URL in the animated object.

How long can an animated screenshot recording be?

Up to 10 seconds. The default is 5000 milliseconds and duration also accepts the 8s form. Recording starts at navigation, so a longer duration is how you reach motion that begins later.

Can I get an animated GIF instead of a video?

No. The output is H.264 in an MP4 container by default, or VP9 in WebM when you set type to webm. Both are much smaller than an equivalent GIF. Keep the MP4 default when playback has to work everywhere.

Why does my recording miss the animation on the page?

CSS animations and transitions are disabled by default so that still captures stay identical between runs. Set animations to true to let them play. The setting does not control JavaScript or WebGL animation loops directly, but it also changes the prefers-reduced-motion value the page sees, so scripts that check that media query may behave differently.

Can I serve the recording straight into a video tag?

Yes. Add embed set to screenshot.animated.url and the response body is the video itself rather than JSON, so the request URL works as the src of a video tag. Recordings are available on the free endpoint with 25 requests per day, see pricing for more volume.

Related use cases

Solve the next problem with the same API

Screenshots of JavaScript-rendered pages

Wait for a selector, a lifecycle event or a delay so single-page apps and lazy sections finish rendering before capture.

Capture JavaScript-rendered pages

Mobile screenshots at any viewport

Emulate an iPhone, a Pixel, an iPad or any custom viewport and capture the page exactly as those visitors see it.

Capture mobile screenshots

Screenshots in dark mode

Set prefers-color-scheme before the capture and get the dark or light theme of any page that supports it.

Capture dark mode

Screenshots with a browser frame

Wrap the capture in a light or dark browser window over a color, gradient or image background.

Add a browser frame

Screenshot a single element

Crop the capture to one CSS selector, such as a chart or a pricing table, with a transparent background if you need it.

Capture a single element

Faster, smaller screenshots

Skip metadata, pick JPEG quality and pixel density, and wait for a selector instead of a timer to cut time and bytes.

Speed up your screenshots

Ready to record the motion?

One option turns a capture into a clip. Start on the free API key and record your first page today.

Get your free API key

Record a page