GIF Maker
Create animated GIFs from a sequence of images.
GIF Maker stitches a sequence of images into an animated GIF — "Create animated GIFs from a sequence of images," exactly as the card says. Drop multiple files, arrange them under "Frames ({n}) - Drag to reorder", tune "Frame Delay (ms)", "Loop Count", and "Background Color", then click "Create GIF" and collect the result as animation.gif.
Encoding runs through gif.js with two Web Workers in your browser — no upload, no AI. Result stats show Frames, Duration (ms), Dimensions, and File Size so you can judge whether to re-encode with a different delay. "Add More" extends an existing batch; "Clear All" or "Start Over" resets the workflow.
How it works
On submit, every image is loaded and drawn centered (scale-to-fit) onto a canvas sized to the first frame; gif.js addFrame(ctx, { delay, copy: true }) queues each with the chosen Frame Delay (10–5000ms step 10, default 100). The encoder runs with workers: 2, quality: 10, workerScript '/gif.worker.js', and the selected background color.
Loop Count comes from the zod form (0–100 where 0 is Infinite per the GIF NETSCAPE convention; UI options are Infinite (0), 1, 2, 3, 5, 10). Output downloads as animation.gif; toasts report "GIF created successfully!" or "Failed to create GIF". Workers stay local — no network involvement.
How to use
- Drop multiple images (accept image/*) into the upload zone.
- Optionally click "Add More" to extend the list; remove frames with the X on each "Frame {i}" row — order is list order ("Drag to reorder").
- Set "Frame Delay (ms)" (10–5000, default 100), "Loop Count", and "Background Color".
- Optionally "Clear All" to empty the frame list.
- Click "Create GIF" (label becomes "Creating GIF...").
- Review the stats: Frames, Duration (ms), Dimensions, and File Size.
- Click "Download GIF" for animation.gif or "Start Over" for a fresh run.
Tips
- Canvas size comes from the first frame — later frames are centered and scaled to fit, letterboxed by Background Color.
- Delay 100ms ≈ 10 fps; drop to 50ms ≈ 20 fps for smoother motion (at the cost of size).
- Loop Count 0 means infinite looping — the GIF NETSCAPE loop convention.
- Background Color fills letterboxed areas whenever frames differ in size — pick something that matches your art.
- Frames are numbered "Frame {i}" in list order; drop them in final playback sequence before encoding.
GIF Maker FAQ
Which library encodes the GIF?
gif.js with 2 workers and the vendored /gif.worker.js script.
Can I reorder frames?
The list header says "Drag to reorder" — frames play in the order they appear.
What does Loop Count 0 mean?
Infinite looping, matching the GIF NETSCAPE loop convention (label: "Infinite (0)").
What is the output filename?
animation.gif.
Is processing local?
Yes — gif.js Web Workers run in your browser; no network or AI is involved.
Credits
- gif.js — Web Worker GIF encoder