Animejs
boraoztunc/skills
Anime.js adapter patterns for HyperFrames. An agent skill from boraoztunc/skills.
Turn a newsletter or blog cover into a seamless looping GIF at 896 x 640, 180 frames at 20fps.
Install Loop Cover
$ npx skills add charlie947/motion-graphics-skills --skill loop-cover -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install charlie947/motion-graphics-skills loop-cover --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/charlie947/motion-graphics-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/loop-cover .claude/skills/loop-cover && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "loop-cover" agent skill from https://github.com/charlie947/motion-graphics-skills/tree/main/skills/loop-cover into .claude/skills/loop-cover/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "loop-cover", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/charlie947/motion-graphics-skills/tree/main/skills/loop-coverType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add charlie947/motion-graphics-skills --skill loop-cover -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install charlie947/motion-graphics-skills loop-cover --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/charlie947/motion-graphics-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/loop-cover .agents/skills/loop-cover && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "loop-cover" agent skill from https://github.com/charlie947/motion-graphics-skills/tree/main/skills/loop-cover into .agents/skills/loop-cover/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "loop-cover", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add charlie947/motion-graphics-skills --skill loop-cover -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install charlie947/motion-graphics-skills loop-cover --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/charlie947/motion-graphics-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/loop-cover .cursor/skills/loop-cover && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "loop-cover" agent skill from https://github.com/charlie947/motion-graphics-skills/tree/main/skills/loop-cover into .cursor/skills/loop-cover/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "loop-cover", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/charlie947/motion-graphics-skills.git --path skills/loop-cover--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add charlie947/motion-graphics-skills --skill loop-cover -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install charlie947/motion-graphics-skills loop-cover --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/charlie947/motion-graphics-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/loop-cover .gemini/skills/loop-cover && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "loop-cover" agent skill from https://github.com/charlie947/motion-graphics-skills/tree/main/skills/loop-cover into .gemini/skills/loop-cover/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "loop-cover", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install charlie947/motion-graphics-skills loop-coverInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add charlie947/motion-graphics-skills --skill loop-cover -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/charlie947/motion-graphics-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/loop-cover .github/skills/loop-cover && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "loop-cover" agent skill from https://github.com/charlie947/motion-graphics-skills/tree/main/skills/loop-cover into .github/skills/loop-cover/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "loop-cover", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add charlie947/motion-graphics-skills --skill loop-cover -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install charlie947/motion-graphics-skills loop-cover --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/charlie947/motion-graphics-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/loop-cover .opencode/skills/loop-cover && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "loop-cover" agent skill from https://github.com/charlie947/motion-graphics-skills/tree/main/skills/loop-cover into .opencode/skills/loop-cover/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "loop-cover", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
loop-cover- GitHub stars
- 180
- Token cost
- ~939 tokens
- SKILL.md length
- 488 words
- Files
- 1
- Repo updated
- First seen
- Licence
- MIT
At a glance
Turn a newsletter or blog cover into a seamless looping GIF at 896 x 640, 180 frames at 20fps.
- Works in 3 steps: Ask for three things, then wait → Build it → Measure it
- Someone says animated cover
- SKILL.md covers Step 1: Ask for three things,…, Step 2: Build it, Step 3: Measure it and What I learned the hard way
- Calls ffmpeg and python3
What it does
Loop Cover is an agent skill from charlie947/motion-graphics-skills. 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.
Its SKILL.md is about 940 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Media & Creative, covering Newsletters, Email management and Motion graphics. The repository describes itself as: 13 Claude Code skills for launch-grade motion graphics. Every frame is code. No After Effects, no video generator. The licence is MIT.
When your agent uses it
- Someone says animated cover
- Make my cover move
- Looping GIF cover
- Newsletter cover GIF
Example prompts
- “animated cover”
- “make my cover move”
- “looping GIF cover”
- “/loop-cover”
Requirements
- Python 3
Workflow steps
3 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit dfc4284. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
ffmpegpython3
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Loop Cover loads about 939 tokens when it runs. Until then it costs about 109 tokens; SKILL.md has 488 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from charlie947/motion-graphics-skills at commit dfc4284, republished under its MIT licence (© charlie947). 488 words, ~939 tokens.
Download SKILL.mdSave it as
.claude/skills/loop-cover/SKILL.md (or your agent's skills folder).- name
- loop-cover
- 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.
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
- 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.
- The one element that moves, named plainly. "The lighthouse beam." "The orange line drawing itself." "The lines between the cells."
- 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.gifShow full SKILL.md (187 more words)Show less
Step 3: Measure it
ffmpeg -v error -y -i cover.gif -vf scale=216:154,format=gray -f rawvideo frames.raw
python3 -c "
n = 216 * 154
d = open('frames.raw', 'rb').read()
f = [d[i:i + n] for i in range(0, len(d), n)]
diff = lambda a, b: sum(abs(x - y) for x, y in zip(a, b)) / n
print('frames', len(f))
print('seam', round(diff(f[-1], f[0]), 2))
print('excursion', round(max(diff(x, f[0]) for x in f), 2))
"Targets from covers I shipped: 180 frames, a seam of 0.0 to 0.3, an excursion of about 0.7 to 2.8, and a file between 0.6 and 2.3 MB. An excursion near zero means nothing visible moves.
What I learned the hard way
- "You changed the image entirely." My first GIF swept a band across the whole frame. Animate only the thing that was named.
- A video model adds a camera move. Told "camera holds completely still", it still pushed in. Animating the still in code is the only way to lock the camera.
- Never measure motion at the halfway frame. A sine is back at zero there, so a working animation reports no motion. Measure the biggest change against frame 0.
- In ffmpeg's
eqfilter, addeval=frame, or the expression runs once and nothing moves. - Shrink it to 240px wide and look again. That is the size in an inbox. If the moving element disappears, it is too small.
- Upload the GIF itself. Some upload tools convert to PNG and the animation is silently gone. Check the uploaded link still ends in
.gif.
© charlie947, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/loop-cover of charlie947/motion-graphics-skills.
Open the folder on GitHubat commit dfc4284
Compare with similar skills
Loop Cover next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Loop Cover this skillcharlie947/motion-graphics-skills | 180 | — | ~939 | Automated safety check: Pass | MIT | |
| Animejsboraoztunc/skills | 398 | 2 repos | ~828 | Automated safety check: Pass | Apache-2.0 | |
| Video Storytellingnateherkai/hyperframes-student-kit | 1.3k | — | ~4.9k | Automated safety check: Pass | Custom licence | |
| Thumbnail Creatormohitagw15856/pm-claude-skills | 1.4k | — | ~6.3k | Automated safety check: Pass | MIT | |
| Redlamp Presspdcgomes/redlamp | 231 | — | ~1.3k | Automated safety check: Pass | MPL-2.0 | |
| Triage Superhuman Inboxsuperset-sh/superset | 15k | — | ~1.2k | Automated safety check: Pass | Custom licence |
Similar skills
Video Storytelling
nateherkai/hyperframes-student-kit
Design and build the visual layer of a long-form talking-head video as one persistent world the camera moves through, instead of a sequence of separate graphics.
Thumbnail Creator
mohitagw15856/pm-claude-skills
Generate article or newsletter thumbnail candidates using the Gemini API from inside Claude Code.
Redlamp Press
pdcgomes/redlamp
The press room, where every outlet Redlamp is pitched to (newsletters, Mac and photography sites, developer and open-source communities, lists and directories) is tracked from finding it to its…
Triage Superhuman Inbox
superset-sh/superset
Work through a Superhuman inbox — sort what is there into needs a reply, waiting on someone else, worth knowing, and noise, then archive, star, label, remind, or unsubscribe only as the user directs.
Gog Weekly Digest
openclaw/gogcli
Read-only weekly digest across Google Calendar, Gmail, and Tasks with gog.
More from charlie947/motion-graphics-skills
All 9 skills in this repoMotion Effects
charlie947/motion-graphics-skills
Build any of 16 premium motion effects from scratch in your own brand, as one 8-second looping HTML file with window.seek(seconds) so it exports frame-exact to MP4 or GIF.
Animated Chart
charlie947/motion-graphics-skills
Make a looping animated chart for LinkedIn or a newsletter in code with Claude Code.
Apple Launch Film
charlie947/motion-graphics-skills
Rebuild an Apple-style Mac launch film entirely in code with Claude Code.
Launch Video
charlie947/motion-graphics-skills
Make a 30-45 second product launch video in code with Claude Code, the kind SaaS companies post on launch day.
Milestone Reveal
charlie947/motion-graphics-skills
Make a 12-second looping milestone clip in code with Claude Code.
Model Showdown
charlie947/motion-graphics-skills
Give the same motion brief to three AI models, keep each first try, render all three the same way and stack them into one comparison video with model names and logos.
Related
Categories
Questions about Loop Cover
What does Loop Cover do?
Turn a newsletter or blog cover into a seamless looping GIF at 896 x 640, 180 frames at 20fps. Loop Cover is an agent skill from charlie947/motion-graphics-skills. Turn a newsletter or blog cover into a seamless looping GIF at 896 x 640, 180 frames at 20fps.
When should I use Loop Cover?
Loop Cover fits situations like: someone says animated cover; make my cover move; looping GIF cover; newsletter cover GIF.
How do I install Loop Cover in Claude Code?
Run `npx skills add charlie947/motion-graphics-skills --skill loop-cover -a claude-code`. Or copy the skill folder (skills/loop-cover in charlie947/motion-graphics-skills) into .claude/skills/loop-cover in your project. Claude Code loads it when a task matches its description.
How do I install Loop Cover in Codex?
Run `npx skills add charlie947/motion-graphics-skills --skill loop-cover -a codex`. Or copy the skill folder (skills/loop-cover in charlie947/motion-graphics-skills) into .agents/skills/loop-cover in your project. Codex loads it when a task matches its description.
Can I use Loop Cover in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add charlie947/motion-graphics-skills --skill loop-cover -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/loop-cover, .gemini/skills/loop-cover, .github/skills/loop-cover and .opencode/skills/loop-cover in your project.
What does Loop Cover need to run?
Going by SKILL.md and its folder, Loop Cover needs the command-line tools its instructions call (ffmpeg and python3). Our summary lists: Python 3.
Does Loop Cover access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Loop Cover safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Loop Cover use?
Loop Cover is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Loop Cover use?
About 939 tokens (SKILL.md is roughly 3.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Loop Cover?
Skills that share tags, products or a category with Loop Cover: Animejs (boraoztunc/skills, 398 stars), Video Storytelling (nateherkai/hyperframes-student-kit, 1.3k stars), Thumbnail Creator (mohitagw15856/pm-claude-skills, 1.4k stars) and Redlamp Press (pdcgomes/redlamp, 231 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Loop Cover?
charlie947 (a GitHub user) maintains it in charlie947/motion-graphics-skills, which has 180 GitHub stars. The repository was last updated on October 10, 2026.
Source: charlie947/motion-graphics-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.