SKILL.md
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.