Some websites are impossible to take full-page screenshots of.
Scrolling triggers animations that change the page in ways that only make sense to be seen within the viewport.
The iPhone 14 web page is an example of this. Here's a screenshot taken with our default settings:
That's a fine screenshot but when you ask us to take a full page screenshot the results are embarrassing.
Sometimes it's just the most delightful aspects of a web page that are hard to show in a long narrow screenshot.
You want screenshots that give users a sense of the experience they'd have if they viewed those websites. The team at Tailwind CSS get it. Checkout the showcase they made (hover over each screenshot).
What if you could show your users a scrolling screenshot like this:
Now you can do just that programatically. With a few extra Urlbox options you can create videos that feel like someone recorded themselves scrolling down a page:
curl -X POST \
https://api.urlbox.com/v1/render/sync \
-H 'Authorization: Bearer YOUR_URLBOX_API_SECRET' \
-H 'Content-Type: application/json' \
-d '{ "url": "https://www.apple.com/iphone-14/", "format": "mp4", "gpu": true, "video_scroll": true}'
Note that we're using gpu acceleration to ensure smooth and fast results.
You can see the MP4 generated by this code here.
Video rendering, including GPU-accelerated scrolling, is generally available and priced the same as any other Urlbox render. See pricing for details.
Scroll to the sections that matter
A constant top-to-bottom scroll is great for a landing page, but sometimes you want to visit specific sections and hold on each one for a set time, for example to walk through key features in turn or line the scroll up with a voiceover. video_scroll_to does exactly that: pass an ordered list of sections (a CSS selector or visible text) and Urlbox scrolls to each one in turn, pausing for a configurable wait before moving to the next:
curl -X POST \
https://api.urlbox.com/v1/render/sync \
-H 'Authorization: Bearer YOUR_URLBOX_API_SECRET' \
-H 'Content-Type: application/json' \
-d '{ "url": "https://urlbox.com", "format": "mp4", "video_scroll_to": ["#full-page-screenshots;wait=4s", "text=Screenshots at internet scale;wait=5s"] }'
Each stop's wait, scroll duration, easing and offset can be tuned individually, so you can pace the scroll precisely, for example to line it up with a voiceover section by section. If a target isn't found on the page, Urlbox holds position for that stop's full time slot rather than skipping ahead, so everything after it stays on schedule.
For the full walkthrough see the Recording videos guide, and for every available option see the video options reference.