# Demo GIF Maker

> Turn a screen recording into a demo GIF for your README, Product Hunt, or X post. Trim, crop, set fps and width, export. Runs in your browser, no upload.

Free video to GIF converter for product demos. Drop a screen recording (MP4, WebM, or MOV), trim it, crop to the part that matters, set the width and frame rate, and export a looping GIF sized for a README, a Product Hunt gallery, or an X post. Encoding runs entirely in your browser: the recording never leaves your machine, no signup, no watermark.

## Command line (recommended for agents)

npx @brandstack/cli demo-gif-maker <frames...> [settings link] [--fps 5..24] [--width <px>] [--start <s>] [--end <s>] [--crop x,y,w,h] [--colors 16..256] [--dither] [--once] [--out <file or dir>]: offline; encodes image frames (extract them from a recording with `ffmpeg -i demo.mp4 -vf fps=12 frames/%05d.png`) with the same encoder as the website, so identical frames give byte-identical GIFs. Paste a settings link from the tool page as an argument and the URL's query string configures everything.

The CLI runs the same engine as this page — same logic, same output contract — with no browser and no account. Browser automation below is the fallback.

## How to use it

1. Agents: extract frames at the chosen rate, then encode: `ffmpeg -i ./docs/demo.mp4 -vf fps=12 /tmp/frames/%05d.png && npx @brandstack/cli demo-gif-maker /tmp/frames/*.png "https://brandstack.dev/tools/demo-gif-maker?fps=12&width=800&start=1.5&end=9.0" --out ./docs/demo.gif`. The CLI treats the frame list as the recording sampled at fps, so the URL's trim window selects frames by time exactly as the website does.
2. In the browser: open the tool, optionally with settings in the query string (see parameters below), and attach a recording (MP4, WebM, or MOV, whatever the browser can play) to the file input (agents: `page.locator('input[type="file"]').setInputFiles(...)`). Nothing is uploaded.
3. Set the trim window with the "Trim start" and "Trim end" sliders (the preview loops the kept range), crop with the "Crop" button (drag the window, apply), and pick the width and frame rate in the rail; palette size, dithering, and loop sit under "More options". The GIF re-renders on its own after every change; only a recording over the auto-render budget shows a "Render GIF" button instead.
4. Wait for the button named "Download GIF" to be enabled (it is disabled while a render is in progress or stale; the readout next to it shows the file size, frame count, and dimensions), then click it and capture the download (agents: listen for Playwright's "download" event).
5. "Copy settings link" carries the whole setup in the URL (the CLI accepts that link directly); "Copy agent prompt" hands the ffmpeg line, the CLI command, and the browser fallback to Claude Code, Codex, or Cursor.

## URL parameters

The page reads these query parameters on load, so a link can carry a complete setup:

- `fps`: Output frame rate, 5 to 24 (default 12)
- `width`: Output width in pixels, never upscaled (default 800); 0 keeps the source width
- `start, end`: Trim window in seconds; end omitted means the end of the recording
- `crop`: Normalized crop window `x,y,width,height`, each 0 to 1, over the source frame
- `colors`: Palette size, 16 to 256 (default 256)
- `dither`: Ordered dithering: 1 on, 0 off (default 0)
- `loop`: 1 loops forever (default), 0 plays once

## Output

One GIF89a file named <recording-name>-<width>x<height>.gif (the CLI defaults to demo-<width>x<height>.gif): one global palette of up to 255 colors plus a transparent slot, frames diffed against the previous one so unchanged pixels stay transparent and each frame shrinks to its changed region, whole-centisecond delays that sum to the trimmed duration at the chosen fps, and a NETSCAPE2.0 loop extension when looping. The settings link reproduces the full setup; only the recording travels separately.

## Links

- Use the tool: https://www.brandstack.dev/tools/demo-gif-maker
- All free tools: https://www.brandstack.dev/tools (markdown: https://www.brandstack.dev/tools.md)
- Agent index: https://www.brandstack.dev/llms.txt

Demo GIF Maker is a free tool by Brand Stack, the AI photo studio for
product marketing. No ads, no signup. Start free: https://www.brandstack.dev/sign-up