What is a paper cutout animation when a browser makes it from one photo?
A paper cutout animation is animation made from flat shapes that were cut out, rather than drawn. In the browser version nothing is physically cut, so the two questions that matter are how the subject is separated from its background and where the paper edge comes from: the cut is a breadth-first colour flood-fill seeded from the four image borders, not object recognition, and the edge is a procedural tear whose noise is keyed to pixel position rather than to the outline index. Both run in the tab, and what leaves is a PNG still or a WebM clip.
- The cut is a flood-fill, not AI. One reference colour is sampled from the four image borders, and background is whatever the fill can reach inward from those borders within tolerance.
- The page prints the share it actually removed, for example
Cutout removed 66.3% of the frame as background. The number is measured, not estimated.
- The paper edge is three noise octaves keyed to pixel position, landing at roughly 500 / 180 / 70 px whatever the image size. Keying them to the outline index instead gives a bowed rectangle, not a tear.
- Three edge styles sit on that same noise by gain alone: Torn at full amplitude, Deckle at half, Shredded at nine tenths.
- Motion leaves as WebM and a still leaves as PNG. No MP4 and no GIF, because the browser ships no free encoder for either.
- Nothing is uploaded. The file is read off your own disk, decoded, rendered and encoded in the tab.
The term arrives split in two, and nothing joins the halves
The definition itself is stable. A paper cutout animation is animation made from flat shapes that were cut out rather than drawn, and that holds whether the shapes are card under a camera or pixels in a tab.
What changes is the cutting. In the browser version nothing is physically cut, so the whole mechanism reduces to two questions: how does the subject get separated from its background, and where does the paper edge come from? Read the pages that rank for the term and those two questions are exactly what is missing.
They split cleanly. The craft and history pages define cutout animation only as physical stop-motion. The tool pages that rank show an effect name and a column of slider labels. Neither half describes what happens when one photo goes in and a cutout animation comes out.
- The craft half, quoted from a ranking page:
Cutout animation is a form of stop-motion animation using flat characters, props and backgrounds cut from materials such as paper, card, stiff fabric or photographs.
- The tool half, quoted from the pages that rank: parameter labels such as
Cutout style, Edge thickness, Shadow blur and Movement, or an instruction to select the object.
- The bridge: the two mechanics behind those labels. That is what the rest of this page describes.
This is not a complaint about those pages. A craft explainer has no obligation to describe a flood-fill, and a landing page has no obligation to publish its renderer. It does mean the digital mechanism is genuinely unclaimed, and it can be described from the implementation rather than from marketing copy. Every number below is either read out of that implementation or measured on this page when it loaded.
How the subject is cut out: a flood-fill from the four borders
The cut is the part people assume is AI, and here it is not. There is no model, no segmentation pass and no network call. It is a breadth-first flood-fill.
The page samples the pixels along the four borders of the image, every third pixel, and averages them into a single reference colour. Every pixel in the frame is then measured against that reference: if it sits inside the tolerance, it counts as background.
Then the fill starts from every border pixel at once and walks inward through neighbouring background pixels, marking as it goes. Whatever it cannot reach stays. That is the subject, and the page reports the share of the frame it removed.
- Reference colour - sampled along the four borders, every third pixel, averaged into one colour.
- Tolerance - the slider maps 0 to 1 onto a colour distance of 26 to 156, with a default of 0.35.
- Walk - breadth-first, seeded from every border pixel, four-connected, so background can only be reached from the outside inward.
- Feather - the mask is given a two-pixel soft edge before it is applied, so the cut is not a hard aliased stair-step.
- Report - the status line prints the measured share, for example
Cutout removed 66.3% of the frame as background.
The consequence of doing it this way is the honest limit of the whole approach, so it is worth stating plainly. A flood-fill knows about colour and connectivity. It does not know what a person is. A subject on an even background separates cleanly; a busy, textured or gradient background does not, and no tolerance setting will fix that, because the information the fill would need is simply not in the colour values.
How the paper edge is made: noise keyed to pixel position
The edge is where a digital cutout either reads as paper or reads as a wobbling rectangle. The difference is one implementation decision, and it is the most interesting line in the renderer.
The outline of the sheet is walked as a closed path. Along it, three noise octaves are summed and pushed outward along the normal. The part that matters is what those octaves are keyed to: pixel position, not the index of the sample along the path.
Keying to the index is the obvious way to write it, and it is wrong for this job. The index runs from zero to the number of samples, so the wavelength of the noise is decided by the perimeter length. On a long outline you get two or three slow lobes across the whole edge, which is a bowed rectangle rather than a tear. Keyed to pixels, the wavelengths land at roughly 500, 180 and 70 pixels whatever the size of the image, which is the scale a hand tear actually breaks at.
- Three octaves - wavelengths of roughly 500 px, 180 px and 70 px, with amplitudes of 0.50, 0.18 and 0.06.
- Keyed to position - the same image scaled up or down keeps the same tear scale instead of stretching its lobes.
- Slope kept near 1 - the amplitudes are low enough that the summed slope cannot fold the outline back through itself and invert it.
- Softness - the edge softness control trades the crisp ragged tear for a rounded worn one, so a high setting reads as handled paper rather than freshly torn.
Three edge styles sit on top of that same noise and differ by gain rather than by a different algorithm: Torn runs at full amplitude, Deckle at half, Shredded at nine tenths. One algorithm, three reads.
What comes out, and in which container
The output is deliberately narrow, and the narrowness is not a policy choice.
A still frame leaves as a PNG, rasterised straight from the canvas. Motion leaves as WebM. There is no MP4 and no GIF, and the reason is the same for both: a browser ships no free encoder for them. A tool that runs entirely on your own device can only hand you what your own device can encode.
The animation is encoded frame by frame in the tab, which is why the export takes about as long as the clip itself. The frame count is not guessed either: it is the duration you chose multiplied by the frame rate you chose.
- Still - PNG, drawn from the canvas.
- Motion - WebM, encoded frame by frame in the tab.
- Frames - duration (1 to 10 seconds) multiplied by frame rate (24, 30 or 60 fps).
- Report - after a download the page prints the real file size, and for WebM also the frame count, the frame rate it actually reached and the real time it took.
One line is worth flagging because most tools leave it out: if this machine cannot hold the frame rate you picked, the status line says so instead of pretending. A clip that quietly records slower than requested is the kind of thing you only discover after you have already cut it into a timeline.
The working size is decided for you
The image is fitted to a working canvas whose long side is capped at 1600 pixels, and small images are scaled up rather than down so that the torn edge has room to exist.
The status line reads back both numbers, so the size you sent and the size being worked on are both in front of you. That is a small thing, and it is the difference between knowing why your export looks the way it does and guessing at it.
The short version
A paper cutout animation is motion made from flat shapes that were cut out rather than drawn. When a browser makes one from a single photo, the cut is a colour flood-fill walking inward from the four image borders rather than object recognition, and the paper edge is a procedural tear whose noise is keyed to pixel position so that it lands at roughly 500, 180 and 70 pixels whatever the image size. A still leaves as PNG, motion leaves as WebM, and the frame count is the duration multiplied by the frame rate. All of it happens in the tab you are looking at.
Questions people actually ask
What is a paper cutout animation?
Animation made from flat shapes that were cut out rather than drawn. The classic version is card and a craft knife under a camera. The browser version separates the subject from its background with a colour flood-fill and grows a procedural paper edge over it.
Does it use AI to cut out the subject?
No. There is no model and no network call. The cut is a breadth-first flood-fill seeded from the four image borders, testing every pixel against one reference colour sampled from those borders. That is exactly why it needs a reasonably even background.
Why does my cutout leave a halo or miss the subject?
Because the fill only knows colour and connectivity, not what a person is. A gradient or textured background will not separate cleanly at any tolerance setting. An even background is the condition the method needs, and no slider substitutes for it.
How is the torn paper edge made?
Three noise octaves are summed along the sheet outline and pushed out along the normal. They are keyed to pixel position rather than to the sample index, so the wavelengths land at roughly 500, 180 and 70 pixels whatever the image size, which is the scale a hand tear breaks at.
Can I export an MP4 or a GIF?
No. A still comes out as PNG and motion comes out as WebM. A browser ships no free encoder for MP4 or GIF, so a tool that runs entirely on your device cannot produce them.
How long can the animation be?
Duration runs from 1 to 10 seconds and the frame rate is 24, 30 or 60 fps, so the frame count is that duration multiplied by that rate. The export is encoded in the tab and takes about as long as the clip.
Is my photo uploaded anywhere?
No. The file is read off your own disk and decoded in the tab, and the render and the encode both happen there as well. There is no server-side copy to store or to lose.
Try it on your own photo
Open the tool, drop one photo in, and turn Cutout on. The status line tells you the exact share of the frame it removed, so you can watch the flood-fill work instead of taking it on faith.
Open PaperRip