# Paper Animation

> Turn any photo into a paper animation with transparent edges.
> https://paper-animation.com

## Overview

Paper Animation is a free, browser-based tool that allows users to create paper cutout style animations from static images. It simulates the look of torn paper edges and stop-motion animation without requiring complex software like Adobe After Effects.

## Key Features

- **Image Segmentation**: Automatically or manually select subjects from photos to cut out.
- **Paper Style**: Customizable paper edge effects including border size, roughness, edge color, and shadow.
- **Animation**: Add "wiggle" movement to simulate hand-made stop-motion or "boil" effects.
- **Export Options**: 
  - **Transparent PNG**: For static graphics.
  - **WebM**: For video with transparent background (alpha channel).
  - **Green Screen**: For chroma keying in video editors.
- **100% Privacy**: All processing happens locally in your browser. No images are ever uploaded to a server.
- **100% Free Forever**: No login required, no credits system, and absolutely no watermarks on exports.

## How to Use

1. **Upload**: Drag and drop an image or select one from your device.
2. **Segment**: Use the built-in segmentation tool to click on the subject you want to keep. Refine the selection as needed.
3. **Style**: 
   - Adjust **Border Size** for the thickness of the paper edge.
   - Adjust **Roughness** to make the edge look more torn or smooth.
   - Set **Edge Color** (usually white for paper).
   - Configure **Shadow** for depth.
4. **Animate**: Increase the **Movement** slider to add a frame-by-frame wiggle effect.
5. **Export**: Click "Export" and choose between PNG (Image) or WebM (Video).

## Use Cases

- **Social Media**: unique profile pictures or posts.
- **Video Editing**: Create assets that look like "After Effects paper animation" without using After Effects.
- **Digital Art**: "Animating on paper" style for digital collages.
- **Presentations**: Creative elements for slides.

## Tech Stack

- Next.js (React)
- TypeScript
- Tailwind CSS
- Konva / React-Konva (Canvas manipulation)
- Marching Squares (Edge detection)

## Links

- **Editor**: https://paper-animation.com/editor
- **Image Segmenter**: https://paper-animation.com/image-segmenter
- **Privacy Policy**: https://paper-animation.com/privacy
- **Terms of Service**: https://paper-animation.com/terms