pinkcel features: a complete tour of the free browser 2D animation tool

pinkcel is a free 2D character animation editor that runs entirely in your browser — no install, no account. This page walks through every tool: drawing, point editing, rigging with bones, point animation, lip-sync, and export to GIF, video, sprite sheets and Godot. Open app.pinkcel.com in a second tab and follow along.

In-depth guides

Quick start: your first animation in five minutes

1. Open the editor at app.pinkcel.com. A blank 1280×720 scene at 24 fps is waiting (change size and frame rate under Scene in the top bar or with File → New).
2. Draw a character with the Freehand tool (P for a clean line, B for a pressure brush) — or skip drawing and insert a ready-made character from the layers panel (👤 button → Simple character). It comes with eyes and a mouth already wired for blinking and lip-sync.
3. Animate: move the playhead on the timeline to frame 12, switch to the Node tool (A) and drag a point. Auto-key is on by default, so a keyframe is written for you — and the rest pose is anchored at frame 0. Press Space to play.
4. Add a voice: select the character, click Add voice in the inspector, pick an audio file (or record from your microphone), and press Lip-sync. The mouth follows the audio.
5. Export: File → Export → GIF (or MP4, WebM, a sprite sheet, a Godot scene). Everything renders locally in your browser.

Drawing tools

All drawing in pinkcel is vector: strokes become editable curves with points and tangent handles, so anything you draw can be reshaped, animated or re-colored later — nothing is baked into pixels.

Freehand (P / B)

One tool for all freehand drawing. Draw naturally with a mouse or a stylus; the stroke is fitted to a smooth Bezier curve with only a handful of points, so a long line stays easy to reshape. Choose a preset in the inspector:

• Line — constant width, the classic pen for clean line art (P).
• Ink — full pressure range: a light touch leaves a hair-thin line, a hard press goes bold (B).
• Marker — near-constant width with blunt ends.
• Pencil — thin, stable, muted response.
• Flick — strong entry/exit tapers; expressive even with a mouse.

Pen pressure works out of the box with Wacom, XP-Pen, Huion, Surface Pen and Apple Pencil (the browser's Pointer Events API delivers it). With a mouse, line width follows your drawing speed instead. Brush strokes keep their width profile as data, so you can change the thickness of an existing stroke later.

Shapes (R rectangle, O ellipse)

Drag to draw. Shapes start outline-only by default; add a fill from the Colors section.

Eraser (E)

A true vector eraser: it cuts through shapes (boolean subtract), splits strokes into pieces and removes what you scrub over — while everything stays vector. With a layer selected it erases only that layer; with nothing selected it erases everything visible, like a raster eraser would.

Fill bucket (G) and eyedropper (I)

Click inside a closed shape to fill it, click a stroke to recolor it, pick colors from anything on the canvas.

Colors: stroke and fill, separately

The Colors section in the inspector always shows two wells — Stroke and Fill — for the current selection: the shapes picked with the Edit tool, or the whole layer. Fills can be solid, or linear / radial gradients with editable stops. The color pair in the tool dock ("New") sets the style for shapes you draw next.

Editing points and shapes

Edit elements (S)

Select whole shapes: click, marquee, Ctrl+A for everything on the layer. Move them, or use the transform box to scale and rotate (corners and edges scale, the knob rotates, Shift keeps proportions). Copy, paste and duplicate with Ctrl+C/V/D; nudge with the arrow keys.

Nodes (A)

Point-level editing:

• Click a point to select it, Shift-click to add more, or drag a marquee on empty space to select many.
• Drag a selected point and the whole selection moves together.
• Drag a tangent handle to reshape a curve (Alt breaks the symmetry for a corner).
• Click the curve itself to add a point exactly there, then keep dragging.
• Delete removes the selected points.

Magnet (T)

Drag anywhere and nearby points follow with a soft falloff — bend a line, puff a cheek, straighten a limb without touching individual points. The radius is a tool option (inspector slider), and the strength region shows under your cursor before you press.

Keyframes and point animation

Everything in pinkcel is animatable: layer position, rotation, scale and opacity, bone poses — and the shape of a drawing itself.

Auto-key and the timeline

Move the playhead, change something, and a keyframe is written for you (the Auto-key toggle sits next to the Key button in the timeline). The first key on any track also anchors the rest value at frame 0, so a fresh animation always starts from the default pose. Keys are diamonds on the layer's track: click to jump, drag to retime, marquee to select many, Delete to remove. Each key has an interpolation — linear, ease, ease-in/out, or step for instant switches.

Point animation (no bones needed)

Go to frame 30, take the Node tool and move a point — the line animates from its old shape to the new one. The whole shape is keyframed and the points interpolate between keys. Use it for cloth, hair, tails, mouths, squash-and-stretch, or entire limbs when a skeleton would be overkill. The Magnet writes shape keys too, so you can pose dozens of points in one drag.

Clips and the Mainline sequencer

Each character owns its own clips — self-contained animations like idle, walk, jump, attack. Author a clip, then place clips on the Mainline timeline on several channels; they play together and later, higher-channel clips override shared targets. Root motion moves the whole character from A to B on the Mainline while the clip loops in place — the standard setup for game characters.

Switch groups (flipbook swaps)

A switch group shows one child at a time — eye open / eye closed, mouth shapes. Pick the visible child on any frame and pinkcel writes step keys, so the swap is instant with no cross-fade. Eyes and mouths from the templates are switch groups already.

Bones, IK and mesh deformation

Bones (K) and posing (J)

Drag to create a bone; start on an existing bone to chain a child to its joint. Bind layers to bones in the inspector (Rigid — the layer moves with the bone as a cut-out piece; Mesh — the drawing bends). Pose with the Pose tool; hold Shift for IK: pull a hand and the arm chain follows. Every pose keys automatically.

Mesh deformation and weights (W)

Mesh mode skins the drawing to nearby bones (linear blend skinning) so limbs bend smoothly at the joints. Weights are assigned automatically from each bone's strength radius; paint them by hand with the Weight brush where you need control (Alt reduces). A bone with strength 0 is a pure control bone — it drives the rig but never bends a mesh.

Selective binding, smart bones and morphs

Each layer can list which bones may deform it. A bone can act as a smart dial: its rotation flips the children of a switch group (turn the "head" dial and the face changes angle). The Morph brush (M) sculpts corrections on top of a pose — fix an elbow crease at 90°, and the fix blends in with the bone angle.

Faces, blinking and lip-sync

Insert a character template from the layers panel and you get a head with eyes and a mouth built as switch groups. The inspector's face constructor swaps styles per part — round / anime / dot eyes, simple / toothy / cat mouths — and you can attach parts to your own drawn characters by role.

• Blink: one click keys a blink at the current frame.
• Lip-sync from audio: add a voice (a file, or record with the microphone), press Lip-sync, and the mouth opens with the audio's amplitude — the mouth shapes are ordered quiet → loud. The result lands in its own Lip-sync clip on a separate Mainline channel, so it keeps playing under any body animation.

Import: PSD, SVG, images and audio

• PSD — layers become editable pinkcel layers, folders become groups; the file's composite can double as a tracing reference.
• SVG — paths become editable vector paths with fills, strokes and gradients.
• PNG / JPG / WebP — as image layers (rigged with a mesh if you like) or as a tracing reference beneath the scene.
• Audio — MP3/WAV/OGG tracks with waveforms on the timeline; microphone recording built in.

Everything supports drag-and-drop: drop a file on the canvas (images ask "layer or reference?") or on the layers panel (always a layer). Dropping a saved .anim.json opens the project.

Export: GIF, video, sprite sheets and Godot

All rendering happens in your browser — nothing is uploaded, there is no queue and no watermark.

Scene size presets go from HD to 4K, plus square and vertical (9:16) for shorts; resizing can rescale existing content.

Saving, cloud and AI agents

• Local first. Projects are single .anim.json files (assets embedded). Autosave keeps your work in the browser between sessions.
• Google Drive saves. Sign in and save projects to your own Drive; pinkcel only sees the files it created. Nothing you make is stored on pinkcel servers.
• MCP for AI agents. Connect the editor to Claude Code, Cursor or any MCP client and let an agent build or edit the animation in your open tab — with a rendered frame as feedback. Part of Pro.
• Undo everything. Every action, including agent edits, lands in undo history.

Keyboard shortcuts

Press ? in the editor for the full cheatsheet. The essentials:

Frequently asked questions