FramePatch — PNG Animation Aligner Demo

Align PNG animation frames around one shared reference point.

Uneven cropping can make a character jump around between frames. FramePatch lets you import a PNG sequence, mark the same point in each image, and compare the original animation with the aligned result.

TRY THE FREE 8-FRAME DEMO

Launch the tool above in fullscreen on a desktop browser. Importing PNGs replaces the included geometric example. This page accepts no payments or donations. A larger offline edition is not offered for sale here yet.

1. Import up to 8 PNG frames. Numbered filenames sort naturally.

2. Click an anchor on each frame and fine-tune its X/Y position.

3. Compare original and aligned playback, with onion skin for neighbouring frames.

4. Export a ZIP containing equally sized PNGs, a sprite sheet and generic JSON metadata.

Save and reopen a project to keep your artwork, frame order and anchors. Processing happens locally in your browser; the tool does not upload your artwork.

WHAT TO EXPECT

FramePatch moves frames; it does not redraw artwork or track motion. Auto-anchor starts at the bottom center of nontransparent pixels. Choose a consistent foot, joint or other reference point yourself.

Whole-pixel positioning avoids geometric resampling. Browser PNG decoding may convert color profiles or transparent-pixel RGB. Engine-specific importers are not included.

Limits: 8 PNG frames, 2048 pixels per input edge, 12 MB per PNG, 24 million input pixels total. Export: 8192 pixels per edge, 32 million pixels per sheet. Projects: 50 MB. No GIF/video import or subpixel placement. Export animated PNGs as separate frames first.

FEEDBACK

Could you align and export the example without help? Which step was unclear? Tell us in the comments. For a bug, include your browser version and steps. Do not post private artwork.

AI DISCLOSURE

Code and explanatory text were created with AI assistance. The tool uses deterministic calculations, with no generative AI service at runtime. The example and cover diagram use original geometric calibration shapes.FramePatch aligns PNG animation frames.