Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Looping Cover GIF

Turns a newsletter or blog cover into a seamless 896x640 looping GIF (180 frames at 20fps) where only one named element moves.

Image & VideoIntermediate★ 205⑂ 36AI score 9/10Last updated: Oct 11, 2026

What it does

  • Takes a finished PNG cover or an HTML-built cover and produces a 896 x 640, 180-frame, 20fps (9 second) looping GIF.
  • Animates only the one element you name (a lighthouse beam, a line drawing itself, a slow glow) by building a colour mask with a softened edge, so nothing outside the mask changes.
  • Rotates the loop so frame 1 is the finished picture, because inboxes and link previews render the first frame as a still.
  • Encodes with ffmpeg using dither=none to avoid per-frame flicker, then measures seam, excursion, frame count and file size with a short Python script so the loop is verified numerically, not by eye.

Who it's for

  • Newsletter writers, bloggers and content marketers who want a cover that moves subtly in a feed
  • Anyone frustrated that video models sneak in a camera push, who wants frame-accurate control in code
  • Users comfortable with a terminal and with ffmpeg and python3 installed

Example uses

  1. "Make only the lighthouse beam in this cover pulse slowly" → masked loop GIF plus a measured seam of 0.1
  2. "Turn my HTML cover into an animated thumbnail" → adds window.seek(seconds), captures 180 frames, encodes without dithering
  3. "My GIF doesn't seem to move in the inbox" → shrinks to 240px to check visibility and verifies the uploaded link still ends in .gif

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/charlie947/motion-graphics-skills/HEAD/skills/loop-cover/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/loop-cover folder from the GitHub repo charlie947/motion-graphics-skills into my ~/.claude/skills/loop-cover/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/charlie947/motion-graphics-skills.git && mkdir -p ~/.claude/skills && cp -r motion-graphics-skills/skills/loop-cover ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal and run ffmpeg -version and python3 --version to confirm both tools exist. Install them first if needed (macOS: brew install ffmpeg python3).
  2. Clone the repo: git clone https://github.com/charlie947/motion-graphics-skills.git
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy the skill in: cp -r motion-graphics-skills/skills/loop-cover ~/.claude/skills/
  5. Optional but recommended: put a brand.md (hex codes, font, logo path) in your project folder, or run the repo's brand-intake skill first so on-brand claims are grounded.
  6. Restart Claude Code and ask something like "make this cover into a looping GIF" to trigger the skill.
View source on GitHub ↗License: MIT