Make a Product Demo GIF for Docs or GitHub — No Upload
A short GIF is often the fastest way to show a UI bug, feature, or workflow in docs. This guide keeps the GIF readable without letting the file size explode.
Step-by-step
Record only the action
Capture the shortest screen recording that shows the problem or feature. Avoid full-window idle time because every extra second becomes many GIF frames.
Trim to 2-8 seconds
Use the Video Trimmer first. Start one beat before the click and end once the UI state is clear.
Export at 480 px and 10-12 FPS
In Video to GIF, set width to 480 px and FPS to 10 or 12. This keeps text legible while staying friendly for GitHub and docs pages.
Recommended settings
| Recommended duration | 2-8 seconds |
|---|---|
| Recommended width | 480 px for UI text, 360 px for small embeds |
| Recommended FPS | 10-12 FPS |
| Best content | UI actions, short bug repros, simple product demos |
Check before you publish
- Read the UI text at the width you exported. 480 px is the point below which small labels stop being legible, and a demo nobody can read is not a demo.
- Check the loop point. A demo GIF plays forever, and a jump back to a different screen state is disorienting.
- Confirm the cursor is visible if the demo depends on clicks. Screen recorders often omit it by default.
Tools you may also need
FAQ
Why not use 30 FPS for a product GIF?
UI demos rarely need it. 30 FPS can triple file size while making text harder to load in docs and GitHub issues.
When should I use MP4 instead?
If the clip is longer than 8-10 seconds, has full-screen motion, or needs audio, MP4/WebM is a better format than GIF.
Does this run in my browser?
Yes — every step in this guide uses an in-browser FFmpeg WebAssembly tool. Your video never uploads to a server and never leaves your device.