/graphic-gif

name: graphic-gif
description: Creates animated looping GIFs from CSS animations (default) or AI image-to-video. 800×800px default, 6 animation types, 4 style presets. Trigger when user says "create an animated gif", "make a looping gif", "animated banner", "CSS animation gif", "social media animation", "make this loop", "animated graphic", or "motion graphic".
compatibility: [claude-code, gemini-cli, github-copilot]
author: OpenDirectory
version: 1.0.0

graphic-gif

Generates an animated looping GIF from CSS animations or an AI image-to-video API. Output: `animation.gif`.

Unlike every other `graphic-` skill that outputs a static PNG or PDF, this skill outputs an animated `.gif`. Uses CSS `@keyframes` animations captured frame-by-frame via Playwright and the Web Animations API (Option A, default), or an AI image-to-video pipeline via Kling (Option B).

---

Critical Rules (read before every generation)

1. **Default is css-animated.** Never use `ai-generated` unless explicitly requested. 2. **Canvas is 800×800px square.** All `clamp()` values computed at 800px (1vw = 8px). 3. **Single self-contained HTML.** All CSS inline in `<style>`. Font CDN `<link>` only external dependency. 4. **Never dump HTML in chat.** Save to file, show summary only. 5. **Frame capture uses Web Animations API seeking.** NOT `setTimeout` loops, NOT `animation-delay` tricks. 6. **Exact frame count:** `Math.floor(duration_seconds * fps)` frames. The frame at `t=duration_ms` MUST NOT be captured — it duplicates `t=0` and causes a visible stutter at the loop point. 7. **No placeholder boxes.** CSS-generated visuals only. No "image goes here" elements. 8. **Simpler palettes = smaller files.** Use: `clean-slate`, `terminal`, `electric-burst`, `brutalist`. 9. **No animation-delay for stagger.** Bake stagger into `@keyframes` percentages — frame seeking handles timing. 10. **Commit to design direction before writing CSS.** Tone, signature element, motion style, unforgettable detail — all decided before first line of code.

---

Step 1: Intake

**Required:** `prompt` (content description AND motion brief)

**Optional with defaults:**

| Parameter | Default | Options | |---|---|---| | animation_type | css-animated | css-animated / ai-generated | | duration | 3.0 | seconds | | fps | 12 | frames per second | | loop | true | true / false | | style | clean-slate | clean-slate / terminal / electric-burst / brutalist | | dimensions | 800x800 | WxH in pixels | | optimization | balanced | quality / balanced / filesize |

**If prompt is missing or lacks motion description, ask exactly:**

> "What should the GIF show? Describe the content AND the motion (e.g., 'Stats count up: 73% of buyers read 3+ pieces of content before purchase. Typewriter effect, one character at a time. Style: terminal. 3 seconds, 12fps.') > > Key settings (all optional, defaults shown): > - animation_type: css-animated (default) or ai-generated > - duration: 3.0 seconds > - fps: 12 > - loop: true > - style: clean-slate (options: clean-slate / terminal / electric-burst / brutalist) > - dimensions: 800x800 > - optimization: balanced (options: quality / balanced / filesize)"

If all required info is present → skip directly to Step 2.

---

Step 2: Internal Architecture (never shown to user)

**For css-animated:**

1. Choose animation type from: `fade-in`, `slide-in`, `typewriter`, `counter`, `pulse`, `loop-scroll` 2. Read `references/animation-library.md` — find the chosen type's full HTML/CSS spec 3. Read `references/style-presets.md` — load the chosen style's CSS token block 4. Calculate frame count: `Math.floor(duration_seconds * fps)` — write this number down 5. Commit to design direction:

| Decision | Derive from | |---|---| | Tone | Emotional register for audience (mechanical / warm / electric / professional) | | Signature element | ONE visual device used consistently (cursor blink, ghost number, scan-line overlay, accent border) | | Motion style | Ease curve philosophy for this type (spring / linear / step / ease-in-out) | | Unforgettable detail | The ONE thing a viewer will remember about this GIF |

**For ai-generated:** 1. Generate base still frame HTML (poster-style layout for the canvas) 2. Export as PNG using screenshot 3. Call Kling API: `POST https://api.klingai.com/v1/videos/image2video` with `image_url` and `prompt` describing the motion 4. Poll for job completion 5. Download video → convert to GIF with ffmpeg:

   # Two-pass palette for best color quality
   ffmpeg -i input.mp4 -vf "fps=12,scale=800:800:flags=lanczos,palettegen=stats_mode=diff" palette.png
   ffmpeg -i input.mp4 -i palette.png -vf "fps=12,scale=800:800:flags=lanczos,paletteuse=dither=bayer:bayer_scale=5" output.gif

---

Step 3: HTML Generation (css-animated path)

Read `references/animation-library.md` and `references/style-presets.md` before generating.

**Canvas base — required on every GIF:**

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  width: 800px;
  height: 800px;
  overflow: hidden;
  background: var(--bg);
  font-family: var(--font-body);
}

.canvas {
  width: 800px;
  height: 800px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

**Animation rules:**

• `animation-fill-mode: forwards` (or `both`) on ALL animated elements
• Timing functions per type:
• `typewriter` → `steps(N, end)` where N = exact character count
• `counter` → `linear`
• `fade-in` → `cubic-bezier(0.22, 1, 0.36, 1)` (ease-out)
• `slide-in` → `cubic-bezier(0.34, 1.56, 0.64, 1)` (spring overshoot)
• `pulse` → `ease-in-out` with `animation-iteration-count: infinite`
• `loop-scroll` → `linear` with `animation-iteration-count: infinite`
• For one-shot animations (fade-in, slide-in, typewriter, counter): `animation-iteration-count: 1` — looping happens at GIF level
• **No `animation-delay`** — stagger is baked into `@keyframes` percentages

**Ty