Skip to main content
Category: Visual & Media · Version: 1.0.0 · Author: OpenDirectory · Compatibility: All targets (claude, codex, opencode, gemini, anti-gravity, openclaw, hermes)
Generate animated looping GIFs from CSS animations. 800×800px default, 6 animation types, 4 style presets.

​
Install

​
What it does

  • Asks for a prompt (content + motion description) and optional settings
  • Generates a self-contained HTML file with CSS @keyframes animations
  • Captures frames using Playwright + Web Animations API for frame-accurate seeking
  • Assembles frames into a GIF with gifenc
  • Optimizes the GIF with gifsicle for 35–50% size reduction
  • Outputs a looping animation.gif ready for social, email, or Slack

​
Example

“Create an animated GIF, css-animated, typewriter effect. Text: ‘73% of B2B buyers read 3+ pieces of content before contacting sales.’ Each character types out one at a time. Style: terminal. 3 seconds, 12fps, loop=true.”
Output: animation.gif — dark background, JetBrains Mono font, green cursor, character-by-character reveal.

​
Supported Animation Types

​
Supported Styles

​
Parameters

​
Output

Typical file size: 150KB–1.5MB depending on animation type, duration, and optimization.

​
Dependencies

Node.js — required. Install from nodejs.org or brew install node. Everything else is bundled inside this skill or installed automatically on first run:
  • scripts/export-gif.sh — orchestrator script
  • scripts/capture-and-encode.mjs — Playwright frame capture + gifenc assembly
  • gifenc + sharp (or jimp) + playwright — auto-installed via npm on first run
  • gifsicle — optional but recommended for 35–50% smaller files: brew install gifsicle
For AI-generated GIFs (optional):
  • Kling API key in environment: KLING_API_KEY
  • ffmpeg for video→GIF conversion: brew install ffmpeg