How to Use Exercise Animations in Your Videos: WebP to MP4, GIF, or a Transparent Layer

The clips ship as 960px animated WebP with a real alpha channel: no background, just the figure. That is the master you want to own — any background, any aspect ratio, re-exported as often as you rebrand. What it is not is a file Premiere, Final Cut, DaVinci or CapCut will accept as-is.

Which export you need depends on the job:

Example 1: a clip on a background

Example 2: figures standing in your own shot

Both were built with the commands below.

Step 1 — get the frames out

FFmpeg cannot decode these clips directly. It only learned animated WebP in 7.1, and it still stops at image data not found on frames stored as blended sub-rectangles — what any size-optimised encoder produces, ours included.

Use libwebp’s anim_dump, which composites every frame onto the full canvas:

CLIP=images/animations/mountain-climbers.webp
mkdir -p frames && anim_dump -folder frames "$CLIP"

It ships with cwebp — brew install webp, apt install webp, or the libwebp release binaries.

Then read the clip’s real frame rate. Guessing 25 or 30 is the fastest way to an export that stutters and drifts out of sync with your voice-over:

FPS=$(webpinfo -summary "$CLIP" \
  | awk '/Duration/ {n++; ms += $2} END {printf "%.0f", n / (ms / 1000)}')

Ours run between 16 and 24 fps depending on the movement.

Step 2 — pick your export

MP4 on a solid background, for a post that goes straight out:

ffmpeg -y -framerate "$FPS" -i "frames/dump_%04d.png" \
  -f lavfi -i "color=c=#111827:s=960x960:r=$FPS" \
  -filter_complex "[1:v][0:v]overlay=shortest=1,format=yuv420p[v]" \
  -map "[v]" -an -c:v libx264 -crf 23 -movflags +faststart out.mp4

Both rates carry $FPS — the colour source drives the output through the overlay. Swap color= for -loop 1 -i background.jpg to use an image.

Over your own footage, corner placement:

ffmpeg -y -i your-clip.mp4 -framerate "$FPS" -i "frames/dump_%04d.png" \
  -filter_complex "[1:v]scale=540:-1[fg];[0:v][fg]overlay=W-w-40:H-h-40:shortest=1[v]" \
  -map "[v]" -map 0:a? -c:v libx264 -crf 20 -movflags +faststart out.mp4

Keeping the alpha for your timeline — ProRes 4444 for wide editor support, WebM/VP9 for a fraction of the size:

ffmpeg -y -framerate "$FPS" -i "frames/dump_%04d.png" \
  -c:v prores_ks -profile:v 4444 -pix_fmt yuva444p10le out.mov

ffmpeg -y -framerate "$FPS" -i "frames/dump_%04d.png" \
  -c:v libvpx-vp9 -pix_fmt yuva420p -b:v 0 -crf 30 out.webm

The PNG sequence is the third and most portable option — most editors import dump_0001.png as a sequence. Support varies by application and version, so run one file from the free preview bundle through yours before planning a series around it.

GIF, only where a GIF is genuinely required. Generate a palette from the clip or the colours band:

ffmpeg -y -framerate "$FPS" -i "frames/dump_%04d.png" \
  -filter_complex "[0:v]split[a][b];[a]palettegen[p];[b][p]paletteuse" out.gif

GIF transparency is one bit — fully opaque or fully clear — so soft edges fringe against any background other than the one you generated the palette on.

Two things that make an export look wrong

Frame rate — read it from the file, never assume.

Edges — check the result on a light and a dark background. A pale halo around a barbell, a band or a cable means something in the chain flattened against the wrong background.

Before you publish

Purchases carry the Media Use Addendum: video, social posts, courses, presentations and thumbnails under your own brand, free or monetised. The clips go into your work rather than being the work — full-frame moments up to a third of the running time, otherwise inside 70% of the frame with your own footage, graphics, text or narration alongside. Work for someone else’s brand needs a separate agreement.

Media Use Addendum (m1.0) has the exact wording, exercise clips for video has the library itself, and Animated WebP vs MP4 covers the app-side view — byte budgets, decode cost, what to ship on which screen.