Clean Edges: Using a PNG Alpha Mask on AI-Generated Animations

Clean Edges: Using a PNG Alpha Mask on AI-Generated Animations

Raphaël Pinson, building new UI for Isovalent Labs, needed clean animated WebP tiles from AI-generated video. Color detection and chroma key both failed to remove black and pink backgrounds cleanly.

Why This Matters

AI video models interpolate colors unpredictably, making chroma key removal unreliable even with precise source colors. Color detection also fails when subject and background share similar hues, causing jagged edges and lost details in shadows or dark areas.

Key Insights

• Color detection fails on AI-generated video because black background bleeds into dark subject areas like shadows and rooftops, making removal inaccurate, 2026. The fix avoids detection entirely.
• Chroma key fails because AI video models interpolate the key color (e.g., #FF00FF) into a cloud of pinks and purples, preventing clean removal, 2026. Eroding the border at 5px removes stray pixels but creates worse edges.
• Applying the original PNG alpha mask as a per-frame overlay produces perfect, anti-aliased edges because no camera movement was enforced, 2026. The mask is exact, requiring no detection.
• WebP and APNG support full alpha transparency, while GIF only supports binary transparency, causing jagged edges regardless of mask quality, 2026. For web UI, animated WebP is recommended.

Working Examples

A bash script that crops and resizes an MP4 animation using ffmpeg, then applies the original PNG alpha mask to each frame using ImageMagick, and assembles them into an animated WebP with transparency.

#!/usr/bin/env bash
# Usage: ./make_tile.sh <name>
# Expects <name>.mp4 (16:9) and <name>.png (square, with alpha)
set -euo pipefail
NAME="${1:?Usage: $0 <name>}"
FPS=12
QUALITY=75
SIZE=320
CROP="crop=720:720:280:0"
mkdir -p "${NAME}_frames"
ffmpeg -y -i "${NAME}.mp4" \
-vf "${CROP},fps=${FPS},scale=${SIZE}:${SIZE}" \
-vsync vfr \
"${NAME}_frames/frame_%04d.png" \
-loglevel warning
for f in "${NAME}_frames"/frame_*.png; do
magick "$f" \
\( "${NAME}.png" -alpha extract -resize "${SIZE}x${SIZE}!" \) \
-compose CopyOpacity -composite \
"$f"
done
DELAY=$((100 / FPS))
magick -delay "$DELAY" -loop 0 \
"${NAME}_frames"/frame_*.png \
-define webp:lossless=false \
-quality "$QUALITY" \
"${NAME}.webp"
rm -rf "${NAME}_frames"

Practical Applications

• Use case: AI-generated UI animations (Isovalent Labs) — Enforcing no camera movement in generation prompts ensures the subject stays within the original mask, enabling exact alpha stamping without drift. Pitfall: Using chroma key for AI video — The model interpolates the key color, producing a multi-hue fringe that cannot be removed cleanly, even with erosion.
• Use case: Web UI tiles with transparent backgrounds — WebP with full alpha provides smooth anti-aliased edges, outperforming GIF’s binary transparency. Pitfall: Removing background via color detection — Dark areas in the subject (e.g., shadows, eyes, rooftops) get incorrectly removed when background and subject share similar hues.
• Use case: Batch processing animations (scripted pipeline) — The scripted approach using ffmpeg and ImageMagick automates background removal across many tiles with consistent results. Pitfall: Assuming AI models preserve exact color values — The model blends the magenta chroma key into the scene, making it impossible to isolate with a simple color threshold.
• Use case: Enforcing seamless loops — Passing the same start and end frame to the AI tool ensures smooth looping without visible jumps. Pitfall: Not constraining camera movement — Any zoom or pan during generation breaks the mask alignment, causing subject misalignment with the static PNG alpha.

References:

• https://dev.to/raphink/clean-edges-using-a-png-alpha-mask-on-ai-generated-animations-ifb