# Loop Cover

Turn a newsletter or blog cover into a seamless looping GIF at 896 x 640, 180 frames at...

- Repository: https://github.com/charlie947/motion-graphics-skills (519 stars)
- Category: Marketing
- License: MIT
- Last updated: 2026-10-11
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add charlie947/motion-graphics-skills --skill loop-cover -g -a claude-code -y`
Codex: `npx skills add charlie947/motion-graphics-skills --skill loop-cover -g -a codex -y`
Cursor: `npx skills add charlie947/motion-graphics-skills --skill loop-cover -g -a cursor -y`
Gemini CLI: `npx skills add charlie947/motion-graphics-skills --skill loop-cover -g -a gemini-cli -y`

## Description

Turn a newsletter or blog cover into a seamless looping GIF at 896 x 640, 180 frames at 20fps. Only the one element you name moves, the loop is rotated so frame 1 shows the finished picture, and the seam is measured, not eyeballed. Use when someone says "animated cover", "make my cover move", "looping GIF cover", "newsletter cover GIF", "animate my thumbnail" or wants a cover that moves in the inbox without looking busy.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Looping cover GIF

A cover that moves gets noticed in a feed full of stills. It only works if the move is small, the loop never jumps and the first frame still makes sense on its own.

**Before you start:** read `brand.md` and `MOTION.md` if they exist. If not, run `brand-intake` first, or ask for hex codes, a font and a logo file. Never call a result on-brand without them.

## Step 1: Ask for three things, then wait

1. **The cover.** A finished still (PNG) or a cover built in HTML. 896 x 640, or a larger image with the same 7:5 shape.
2. **The one element that moves,** named plainly. "The lighthouse beam." "The orange line drawing itself." "The lines between the cells."
3. **How it moves.** A pulse, a draw-on, a slow drift or a glow. One move, not three.

## Step 2: Build it

**If the cover is HTML:** animate only the named element as a pure function of time, add `window.seek(seconds)`, and capture 180 frames at 20fps (9 seconds).

**If the cover is an image:** animate the still in code. Make a mask of the named element by colour (for example every pixel where blue is much stronger than red), soften its edge a few pixels, and change only those pixels, frame by frame. Nothing outside the mask moves.

For both, use one clean sine cycle or one draw-on, hold and fade across the 9 seconds, so the last frame flows into the first.

**Rotate the loop so frame 1 is the finished picture.** Inboxes and link previews show frame 1 as a still. Frame i draws the moment `((i + offset) mod 180) / 20` seconds, where `offset` puts the fully drawn state first.

Encode with no dithering, because dither adds flicker to every frame of a flat image:

```
ffmpeg -y -framerate 20 -i f%03d.png -filter_complex "split[x][y];[x]palettegen=max_colors=128:stats_mode=full[p];[y][p]paletteuse=dither=none" -loop 0 cover.gif
```

## Step 3: Measure it

The rest: https://github.com/charlie947/motion-graphics-skills/blob/HEAD/skills/loop-cover/SKILL.md