Animated GIF Creator Toolkit

Automated GIF creation toolkit that generates animated GIFs from image sequences, screen recordings, video clips, and programmatic animations with optimization for web delivery.

When to Use This Skill

Choose Animated GIF Creator when:

• Creating animated demonstrations of UI interactions
• Converting video clips into shareable GIFs
• Building animated product showcases for marketing
• Creating code execution visualization GIFs for documentation
• Generating reaction GIFs or memes from video sources

Consider alternatives when:

• Need high-quality video — use MP4/WebM (smaller, better quality)
• Need interactive animation — use CSS/JS animations
• Need long-form content — GIFs over 10 seconds become too large

Quick Start

Copy
# Activate GIF creator
claude skill activate rapid-animated-gif-creator-toolkit

# Create GIF from video
claude "Convert the first 5 seconds of demo.mp4 into an optimized GIF"

# Create from image sequence
claude "Create an animated GIF from the PNG frames in frames/"

Example GIF Creation with FFmpeg

Copy
# Video to GIF with optimized palette
# Step 1: Generate palette from video
ffmpeg -i input.mp4 -vf "fps=15,scale=480:-1:flags=lanczos,palettegen=stats_mode=diff" palette.png

# Step 2: Create GIF using palette
ffmpeg -i input.mp4 -i palette.png \
  -filter_complex "fps=15,scale=480:-1:flags=lanczos[x];[x][1:v]paletteuse=dither=bayer:bayer_scale=5" \
  output.gif

# Quick one-liner (lower quality but simpler)
ffmpeg -i input.mp4 -vf "fps=12,scale=320:-1" -t 5 output.gif

# Screen recording to GIF (macOS)
ffmpeg -f avfoundation -i "1" -t 10 -vf "fps=15,scale=640:-1" screen.gif

# Image sequence to GIF
ffmpeg -framerate 10 -pattern_type glob -i 'frames/*.png' \
  -vf "scale=480:-1" -loop 0 animation.gif

# Add text overlay
ffmpeg -i input.mp4 -vf "fps=15,scale=480:-1,\
  drawtext=text='Demo':fontcolor=white:fontsize=24:x=10:y=10" output.gif

Core Concepts

GIF Optimization Techniques

Technique	Size Reduction	Quality Impact
Frame rate reduction (30→12 fps)	50-60%	Slight choppiness
Resolution downscaling	40-70%	Smaller display size
Color palette optimization	20-40%	Minimal with good palette
Frame diffing (palettegen diff)	30-50%	None (lossless)
Lossy compression (gifsicle)	20-40%	Slight artifacts
Duration trimming	Proportional	Less content shown
Dithering selection	10-20%	Varies by content

Creation Methods

Method	Input	Tool	Best For
Video clip	MP4, WebM	FFmpeg	Screen recordings, demos
Image sequence	PNG/JPEG frames	FFmpeg, ImageMagick	Frame-by-frame animation
Screen capture	Live screen	FFmpeg, gifcap	UI demonstrations
Programmatic	Code-generated frames	Canvas + GIF encoder	Data visualizations
Terminal	Terminal session	ttygif, terminalizer	CLI tool demos
Browser	Web page interaction	Puppeteer + FFmpeg	Web app demos

Copy
// Programmatic GIF creation with gif.js
import GIF from 'gif.js';

function createAnimatedGIF(frames: HTMLCanvasElement[], options: GIFOptions) {
  return new Promise<Blob>((resolve, reject) => {
    const gif = new GIF({
      workers: 4,
      quality: 10,          // 1 = best, 20 = worst
      width: frames[0].width,
      height: frames[0].height,
      workerScript: '/gif.worker.js',
    });

    for (const frame of frames) {
      gif.addFrame(frame, { delay: options.frameDelay || 100 });
    }

    gif.on('finished', (blob: Blob) => resolve(blob));
    gif.on('error', reject);
    gif.render();
  });
}

// Usage: Generate math animation frames
const canvas = document.createElement('canvas');
canvas.width = 480;
canvas.height = 480;
const ctx = canvas.getContext('2d')!;
const frames: HTMLCanvasElement[] = [];

for (let i = 0; i < 60; i++) {
  ctx.clearRect(0, 0, 480, 480);
  ctx.fillStyle = '#1a1a2e';
  ctx.fillRect(0, 0, 480, 480);

  // Draw animated sine wave
  ctx.strokeStyle = '#e94560';
  ctx.lineWidth = 3;
  ctx.beginPath();
  for (let x = 0; x < 480; x++) {
    const y = 240 + Math.sin((x + i * 8) * 0.02) * 100;
    x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
  }
  ctx.stroke();

  const clone = document.createElement('canvas');
  clone.width = 480;
  clone.height = 480;
  clone.getContext('2d')!.drawImage(canvas, 0, 0);
  frames.push(clone);
}

Configuration

Parameter	Description	Default
fps	Frames per second	15
width	Output width in pixels	480
duration	Maximum duration in seconds	10
quality	Quality level (1-20, lower is better)	10
loop	Number of loops (0 = infinite)	0
optimize	Apply lossy optimization	true
dither	Dithering algorithm: bayer, floyd_steinberg, none	bayer
max_file_size	Target maximum file size	5MB

Best Practices

1. Use two-pass palette generation for best quality — FFmpeg's single-pass GIF conversion uses a generic 256-color palette. Two-pass generation analyzes the actual video content first (palettegen), then creates the GIF with an optimized palette (paletteuse), dramatically improving color accuracy.

2. Target 10-15 FPS for UI demos, 8-12 FPS for general use — Higher frame rates linearly increase file size. Most UI interactions look smooth at 12-15 FPS. Only use higher rates for fast-moving content like games or physics simulations.

3. Post-process with gifsicle for final optimization — After creating the GIF, run gifsicle -O3 --lossy=80 input.gif -o output.gif for additional 20-40% size reduction with minimal quality loss. Experiment with lossy values between 60-100.

4. Keep GIFs under 5MB for web use, under 15MB for documentation — Large GIFs slow page loads and consume mobile data. If your GIF exceeds these limits, consider embedding an MP4 video instead — MP4 is 5-10x more efficient for the same visual quality.

5. Add a clear start and end point for looping GIFs — Design your GIF so the last frame transitions smoothly to the first frame. For screen recordings, start and end at the same UI state. Jarring loop cuts make GIFs feel unprofessional.

Common Issues

GIF file size is too large for web embedding. Reduce resolution (480px width is usually sufficient), lower frame rate to 10-12 FPS, shorten duration, and apply lossy compression. If the GIF still exceeds 5MB, convert to MP4 which achieves the same visual quality at 10-20% of the file size.

Colors look banded or posterized in the GIF. GIF format supports only 256 colors per frame. Use optimized palette generation (FFmpeg palettegen with stats_mode=diff) and apply dithering to simulate gradients. For content with many colors, split complex scenes into simpler compositions.

GIF animation speed varies between browsers and platforms. GIF timing uses centisecond delays (1/100th second), and some platforms enforce minimum delays. Set frame delay to at least 30ms (33 FPS max) for consistent playback. Discord and Slack may further compress or re-encode uploaded GIFs.