GIFs are the one animated format that plays everywhere images do: GitHub READMEs, emails, Slack, Notion, Jira tickets and docs written in Markdown. Video doesn't autoplay in most of those places. Recording a GIF of a page, a component or a loading animation is one request.
A GIF of a page
curl -X POST "https://shotkit.net/api/take" \
-H "X-Access-Key: YOUR_ACCESS_KEY" \
-H "Content-Type: application/json" \
-d '{"url":"https://example.com","format":"gif","animation_duration":4,"animation_fps":12,"image_width":640,"block_cookie_banners":true}' \
--fail-with-body -o shot.gifGIFs get big fast. Keep them short, lower animation_fps (10–12 is smooth enough for UI), and scale down with image_width.
Animated WebP: same idea, much smaller
An animated WebP is usually a fraction of the size of the same GIF, with better colors. Every current browser shows it; GitHub READMEs and most chat apps do too. Older email clients don't, so use GIF for email.
curl -X POST "https://shotkit.net/api/take" \
-H "X-Access-Key: YOUR_ACCESS_KEY" \
-H "Content-Type: application/json" \
-d '{"url":"https://example.com","format":"webp","animation_scroll":true,"animation_duration":6,"image_width":640,"image_quality":70}' \
--fail-with-body -o shot.webpWith format: "webp", setting any animation option is what makes it animated.
Record one component
Capture just a button, a chart or a loader with selector. Here it's an animation written in HTML:
curl -X POST "https://shotkit.net/api/take" \
-H "X-Access-Key: YOUR_ACCESS_KEY" \
-H "Content-Type: application/json" \
-d '{"html":"<style>@keyframes s{to{transform:rotate(360deg)}} .box{display:inline-grid;place-items:center;width:200px;height:200px;background:#fff} .spin{width:64px;height:64px;border:8px solid #e5e7eb;border-top-color:#2563eb;border-radius:50%;animation:s .8s linear infinite}</style><div class=\"box\"><div class=\"spin\"></div></div>","selector":".box","format":"gif","animation_duration":1.6,"animation_fps":20}' \
--fail-with-body -o shot.gifMatch animation_duration to a whole number of animation cycles (here two turns of 0.8 s) and the GIF loops seamlessly.
Frequently asked questions
How do I keep GIF file sizes small?
Shorter duration, fewer frames per second, a smaller image_width, and a smaller area with selector. Flat UI compresses much better than photos and gradients. Or use animated WebP where it's supported.
Do GIFs play in emails?
Yes, in almost every client, including Gmail and Apple Mail. Outlook for Windows shows only the first frame, so make it a meaningful one.
Can I make a GIF of a whole scrolling page?
Yes. Add animation_scroll: true and it scrolls to the bottom while recording. For long pages, an MP4 is much smaller; see website to video.