Demo GIF Maker

Turn a screen recording into a demo GIF for a README, a Product Hunt gallery, or an X post. Trim, crop, set the width and frame rate, and export, in the browser or from the CLI, without uploading the recording.

The Demo GIF Maker is a free video to GIF converter at brandstack.dev/tools/demo-gif-maker. Drop a screen recording (MP4, WebM, or MOV), trim it to the moment that matters, crop away the browser chrome, pick a width and frame rate, and export a looping GIF. Decoding and encoding run in your browser, so the recording never leaves your machine. The same encoder runs in @brandstack/cli, so a coding agent can regenerate the GIF whenever the recording changes.

How to use it in the browser

1. Drop a recording onto the page or click the dropzone. Anything your browser can play works: H.264 MP4, WebM, and MOV files from QuickTime, Loom, CleanShot, OBS, or a phone
2. Set the Trim start and Trim end sliders. The preview loops the kept range, and the bar above the sliders shows how much of the recording survives
3. Click Crop to cut the frame to the product area. Drag the window to move it, drag a corner to resize it, then Apply crop
4. In the rail, pick the Width (480, 640, 800, 1000, or the source width) and the Frame rate (5 to 24 fps). More options holds the palette size (32 to 256 colors), dithering, and the loop setting
5. The GIF under the recording re-renders on its own after every change, with a live size readout. Only a long recording (past the auto-render budget) shows a Render GIF button instead
6. Click Download GIF once it is enabled. The file is named <recording-name>-<width>x<height>.gif

Reset settings in the rail returns every dial to its default; the recording stays loaded.

Run it from the command line (recommended for agents)

The CLI runs the exact encoder the website uses. It takes image frames rather than a video file, because decoding video needs ffmpeg or a browser, so the recipe is two lines: extract frames at the chosen rate, then encode.

ffmpeg -i demo.mp4 -vf fps=12 frames/%05d.png
npx @brandstack/cli demo-gif-maker frames/*.png --fps 12 --width 800 --out demo.gif

No account, no network after install. Flags mirror the page’s URL parameters exactly: --fps, --width, --start, --end, --crop x,y,w,h, --colors, --dither, and --once (play once instead of looping). Run --help for everything.

Better yet, configure the tool visually and hand the CLI the link: every setting on the page encodes into the URL, and the CLI accepts that URL as an argument.

npx @brandstack/cli demo-gif-maker frames/*.png \
  "https://brandstack.dev/tools/demo-gif-maker?fps=12&width=800&start=1.5&end=9.0&colors=128&dither=0&loop=1" \
  --out docs/demo.gif

The CLI treats the frame list as the recording sampled at fps, so the trim window selects frames by time exactly as the website does. Extract the whole recording and let the URL trim it; do not crop or scale in ffmpeg, the CLI does both. Identical frames produce byte-identical GIFs in the browser and the CLI (this parity is enforced by a golden test in CI).

URL parameters

How the encoder keeps files small

• One global palette. The palette is built from evenly spaced sample frames, so colors stay stable across the whole loop instead of shifting frame to frame
• Frame diffing. Every frame is compared with the previous one. Unchanged pixels are stored as transparent and each frame shrinks to the bounding box of what changed, so a UI recording where most of the screen holds still costs very little per frame
• Exact timing. GIF delays are whole hundredths of a second. The encoder spreads the rounding across frames so the total duration equals the trimmed length at the chosen frame rate
• Deterministic quantization. Median cut over a fixed histogram, with no randomness, so the same recording gives the same file every time

Length is still the biggest lever. A 6-second loop at 800 pixels and 12 fps is usually a few megabytes; the same recording at 30 seconds is five times that.

Dithering

GIFs hold at most 256 colors per frame. Leave dithering off for flat UI recordings, where it would add visible noise to solid fills. Turn it on for photos, gradients, and video with smooth shading, where an ordered (Bayer) pattern hides the banding a small palette would otherwise produce.

Hand it to a coding agent

• Copy agent prompt on the page copies a structured prompt: the ffmpeg extraction line, one npx @brandstack/cli command carrying your settings deep link, and browser-automation steps as the fallback
• Copy settings link puts the same URL on the clipboard, so a teammate opens the tool with your exact trim, crop, and export settings
• The tool page is also served as plain markdown at /tools/demo-gif-maker.md, and listed with instructions in /llms.txt

When to use this tool

• The README needs a demo and the screen recording is 40 seconds of which 6 matter
• Product Hunt launches Tuesday and the gallery wants a GIF that stays under the size limit
• The recording shows a pre-launch product and cannot go through a hosted converter
• Your coding agent should rebuild docs/demo.gif whenever the recording in the repo changes: one CLI line in a script does it

This tool cuts the recording you have. For the imagery around it, Brand Stack shoots your product on real devices in real scenes, from your brand. Open Mockup Studio or see the Launch Image Resizer for the still exports a launch needs.