Animate Pixel Art Online
Bring your sprites to life frame by frame: onion skin, reorderable filmstrip, shared background layers and one-click GIF or sprite-sheet export.
Turn Pictures Into Pixel Art
Create pixel art from your pictures in seconds. Edit every pixel, animate it, and download your creation.
🔒 Your pictures never leave your device. Everything runs in your browser.
Sakura
Made with PixiMelon · Upload. Pixelate. Edit. Animate. Download.
Turn your picture into pixel art
Upload a picture and create pixel art in seconds.
Drag & drop your picture here
or
PNG · JPG · WEBP · SVG · PDF · AI — you can also paste an image (Ctrl/⌘ + V)
Create New Pixel Art
Pick a canvas size to start drawing.
Animate Pixel Art
Pick a canvas size to start animating.
Turn your video into pixel art
Upload a video and create a pixel art animation in seconds. Everything runs on your device.
Drag & drop your video here
MP4 · WebM · MOV — processed locally, never uploaded
Processing frame 1 / 1
The animation loop, step by step
- Pick a canvas size — presets or any custom W × H, exactly like the maker.
- Draw frame 1 in the embedded editor (same tools, layers and palette).
- Add frames with + Frame, or Duplicate to copy the current one and change only what moves.
- Set the speed with the FPS slider (1–24) and press Play. The loop runs continuously with a live frame counter.
- Export a GIF, a sprite sheet, or the current frame as PNG/SVG/PDF.
Frames and the filmstrip
Frames live in a numbered filmstrip under the canvas: click to jump, drag with the ◀ ▶ buttons to reorder, use ← → keys to step. Delete removes the current frame (the last one clears instead), and Clear wipes unlocked layers of the current frame. Duplicating before editing is the fastest way to keep motion consistent.
Onion skin and timing
Onion skin shows the previous frame tinted red and the next tinted blue behind your drawing, with a Ghost slider for strength — the standard way to judge arcs and spacing. Timing is controlled in frames per second: 4–6 FPS reads as retro choppy, 8–12 FPS is the sweet spot for most sprite loops, and the full 24 FPS suits smooth effects. The techniques are covered in depth in how to animate pixel art.
Backgrounds that do not flicker
Press 🔗 on any layer to share it across all frames — typically the background or ground shadow. Shared layers are stored once and composited under every frame automatically, so static parts never jitter. Regular layers stay per-frame for the parts that move.
From still image to animation
Both editors have an “Animate Pixel Art” button that sends the current composite into the animator (canvas included) and carries the project name along. Start a walk cycle in the maker or convert a picture, then animate it — the intended pipeline is convert → edit → animate → export.
Export: GIF vs sprite sheet
- GIF — loops forever, keeps transparency, and renders the longest side at 512 px or more so small sprites stay crisp when shared.
- Sprite sheet — one PNG with every frame side by side, ready for game engines.
- Single frame — the current frame exports exactly like maker art: PNG at native size (1×), vector SVG or vector PDF.
Frequently asked questions
How many frames can I have?
There is no fixed frame cap — only device memory. Short loops of 2–8 frames cover idle, walk and blink cycles; effects may want more.
What FPS should I use?
Start at 8 FPS. Drop to 4–6 for snappy retro motion, raise toward 12 for smooth loops. Preview first — timing matters more than frame count.
What is onion skin?
A faded preview of the neighboring frames: previous in red, next in blue. It shows exactly how far each pixel travels between frames so motion stays consistent.
How do I keep the background still?
Toggle 🔗 on the background layer to share it across all frames. It is drawn under every frame automatically and never needs redrawing.
Should I export GIF or sprite sheet?
GIF for sharing, previews and stickers — it loops and keeps transparency. Sprite sheet for games and engines that slice frames themselves.
How do I preview my animation?
Press Play: the loop runs continuously with a live frame counter while you tune the FPS slider underneath.
Can I reuse one drawing in several frames?
Yes — Duplicate the frame and change only what moves. Small displacements between frames read as smooth motion.
Why does my motion look wrong?
Step through frames with the arrow keys and watch one landmark pixel with onion skin on: even gaps mean even speed, bunching means easing.