Keyframe.it

Overview

Keyframe.it is a free 2D skeletal animation editor that runs in your browser. You split your artwork into parts, attach the parts to bones, pose the bones over time on a timeline, and export the result as a Spine bundle, GIF, sprite sheet, video or standalone HTML player. It works much like Spine and exports Spine-compatible files, but there is nothing to install and no account to create.

It is built for game developers, slot and casino game artists, and 2D animators. It suits game and slot-machine symbols especially well: symbol starters arrive with clips already keyed, and a Win FX library adds glows and sparkles in one click. It handles full characters too, with weighted meshes, IK and spring physics.

The workspace

• Toolbar (top): the Menu button beside the logo, the AI button, the Setup and Animate mode buttons, the tools (Select, Add Bone, Origin, IK, Mesh, Box, Path, Clip, Point), Play and REC, and Undo/Redo. ? opens the in-app help.
• Hierarchy (left): the bone tree and the parts (slots) on each bone. Inspector (right): values for the selection. Timeline (bottom): clips and keys.

Setup mode builds the rig and its rest pose (the setup pose). Animate mode records poses as keyframes. The ▦ Panels menu shows or hides every panel, including Outliner, Graph, Sliders, Transform, Win FX, Poser, Transitions and Metrics. ＋ save layout saves the panel arrangement, not your project.

Getting started

Open the editor at /?editor=1. The start screen has three columns: Create, Examples and Open. Click the Keyframe.it logo at the top left to bring it back at any time.

The quickest first loop: the guided lesson

Open the gem lesson (Make your first loop on the home page), or click Quick start beside the project tabs and choose Try a guided gem edit. Drag the Bounce height slider, press Play my bounce, then Export my loop…. The slider edits real keyframes, so you can find them in the timeline afterwards.

Your own art, step by step

1. On the start screen, click Start with a guide. The Quick start panel walks you through Artwork → Rig → Animate → Export.
2. Artwork. Click Import artwork… and pick one image per moving part (transparent PNGs work best), then drag the parts into place. For a layered Photoshop file, use Menu → Import PSD….
3. Rig. Click Add bones to artwork. Every part gets a bone and the ✛ Origin tool turns on. Drag each origin to its joint, then drag bone rows onto their parents in the Hierarchy to connect the limbs.
4. Animate. Click Set first keyframe. This creates a clip, turns on ● REC and sets a key at 0 s. Move the playhead to 1 s and rotate a bone; the new pose is keyed.
5. Close the loop. A cycle's last pose must match its first. Go to 0 s and click ⧉ Pose, move to the end of the clip and click ⎘ Pose. Tap Space to preview.
6. Export. Click Open export…, choose 🎞 GIF and press Export. Then press Ctrl+S to keep an editable copy. A GIF holds rendered frames, not bones and keys.

Learn from the examples

The Examples column opens finished rigs as new projects: Noir Character (weighted meshes, springs, smoke), Character Example (a cat), Monkey Character (breathing idle and blink) and Mesh Swap Demo. The slot-symbol buttons (gem, coin, Lucky 7, bell, cherry) open starters with idle, land, anticipation and win clips. Preview them on Examples and follow the walkthroughs on Learn, such as Give a character a breathing idle.

To start from nothing, New Slot Symbol makes a blank square cell (256² to 1024², or a custom 64–2048 px), and Empty Project gives you a single root bone.

Importing art

Every visible part is an image attached to a bone through a slot. Bring art in whichever way suits it:

• Drag and drop an image onto the canvas. It becomes a new bone (a child of the selected bone) with the image attached. A dropped .psd imports its layers.
• Menu → Import Images… adds images to the image library. Place one from Images / Edit… with its ✚ Scene button, or select a bone, click + Slot in the Hierarchy and pick the image in the Inspector.
• Menu → Import PSD… (.psd or .psb) turns every visible layer into a part, placed where it sits in the file. The PSD import setting in the same menu chooses how much rigging happens: Parts only (rig it myself), A bone per layer (flat), or Auto-rig hierarchy (the default), which parents bones by layer name, so foreArmL goes under upperArmL.
• ⤓ Replace… in a part's Inspector swaps in a new image file for that part.

Slicing a sheet (Menu → Slice Sheet…)

Cut parts with ▭ Box, ⬭ Oval, ➰ Lasso or 🪄 Wand, which selects a connected area of similar color in one click (tolerance sets how much). Shift adds a region to the selected part; Alt carves one out. ✨ Auto-detect finds every sprite, and ▦ Grid slices a cols × rows grid. add as decides where parts go: Parts in the scene (on root) (the default), Parts + a bone each (auto-rig), Assembled character (by name), which builds a standing figure from parts named like head, torso and upperArmL, or Image library only (no scene).

Image editor

Menu → Images / Edit…, the Image Studio button, or ✏️ Edit… on a part opens a full-screen image editor: layers with blend modes, brushes, a bezier Pen, editable Text layers (custom fonts, outlines, 13 warp styles), gradients, clone stamp, effects and selection tools. ✂ Clean edges removes leftover halos after a magic-wand cut. The Studio / Image Editor tabs at the top switch back to the rig while your edit stays open.

Importing a Spine export

Menu → Import Spine… reads a Spine 3.8 or 4.x JSON export: select its .json, .atlas and .png files together. Bones, slots, meshes and weights, skins, constraints, events and clips come across; Spine 4.2 physics becomes springs. A message lists anything approximated or skipped. Binary .skel files and .spine editor projects can't be read, so export JSON from Spine first.

Bones and rigging

A bone is a pivot. Parts attached to a bone move, rotate and scale with it, and child bones inherit their parent's motion. Rotate a hip and the whole leg swings. Build the rig in Setup mode; the pose you leave it in is the setup pose that every clip starts from.

Creating bones

• 🦴 Add Bone: drag from a parent bone to create a child. The drag direction sets its rotation and the drag length sets its length.
• Right-click a part in the Hierarchy and choose ✚ New bone here & attach. This works on several selected parts at once.
• ✂ Split bone in the Inspector inserts a joint at the bone's midpoint.
• ✛ Origin moves a bone's pivot without moving its artwork or child bones. Use it after a PSD import to put each pivot on its joint.

Attaching and organizing

• Drag a part row onto a bone row in the Hierarchy to attach it, or select parts and right-click a bone for Attach selected parts →. Parts keep their position on screen.
• Drag a bone row onto another bone to re-parent it. Its world position is kept.
• Ctrl/⌘-click rows to multi-select. Each row has 👁 Hide (hides a part everywhere, exports included), 🔒 Lock and, for bones in Animate mode, ◆ Auto-key.
• Untick inherit rot or inherit scale for a bone that should ignore its parent, such as a held item.

Posing

With ↖ Select, drag a bone's joint to move it or its tip to aim it. The gizmo has a rotation ring (Shift snaps to 15°), axis handles for one-axis scale and a gold circle for uniform scale. The Inspector holds exact values, including shearX and shearY. Parts draw back to front: reorder them in the Hierarchy, with ↓ back / ↑ front, or with [ / ]. ⇄ Flip H and ⇅ Flip V mirror a part.

Fewer, well-placed bones animate better than many. Put each pivot on the real joint.

Meshes and weights

A mesh lets a part bend instead of moving rigidly. Weights bind each mesh vertex to one or more bones, so the art deforms as the bones move. Mesh only what must bend, squash or wave, such as torsos, tails, hair and cloth. Rigid parts pose more cleanly and export lighter.

Making a mesh

Select a part and choose the ⬚ Mesh tool. The tool options bar offers:

• ✨ Fit outline (recommended): traces the art's outline and fills it with even triangles. The detail and uniform sliders control outline accuracy and vertex density.
• ⬚ Grid (full image): a grid over the whole image, with nothing cropped.
• ✎ Cutout: trace a shape, and only that area of the image is drawn.
• ✏️ Guides: draw strokes, such as an edge loop across a knee, then click ✨ Auto-mesh with guides to add vertices along them.

Drag vertices with the Mesh tool to reshape the image, or drag on empty space to box-select several. The Inspector's soft slider pulls nearby vertices along with a falloff.

Binding and painting weights

🦴 Bind to bones weights the mesh to nearby bones automatically. To adjust it, choose 🖌 Paint, pick a bone and drag over the mesh; a heatmap shows each vertex's weight. Hold Shift to remove weight. 💧 Smooth softens seams. Ctrl/⌘-click several parts in the Hierarchy for batch buttons: ✨ Auto-mesh all, 🦴 Auto-weight, Smooth, Prune, Weld and Clear.

More mesh features

• Deform keys: in Animate mode with REC on, drag vertices at different times to animate a shape, such as a blink.
• link mesh reuses another part's mesh and weights.
• Per-image meshes: a slot can hold a different mesh for each image it swaps to (edit mesh of and ＋ mesh for in the Inspector).

If a part warps when posed, weight it fully to its own bone. When a project has meshes, the Inspector also offers 🧊 Make all parts rigid, which removes every mesh in one click.

Animating

A clip is a set of keyframes over time. Click Animate in the toolbar (it creates your first clip if you have none) or + New in the timeline.

Keys and the timeline

• Turn on ● REC, then pose: each change keys the bone at the playhead. ◆ Key keys the selected bone by hand.
• The 🎬 Clips ▾ menu switches, duplicates, reorders and deletes clips. Beside it are the clip's dur (seconds), the project fps and travel, which moves an in-place cycle across the screen.
• The timeline is a dope sheet with rows per bone and per property. Shift+drag to box-select keys, drag them to retime, or drag ⟷ scale to stretch the timing. Hold Alt to ignore frame snapping. Double-click a key, or use ✕ Delete, to remove it.
• ⧉ Pose / ⎘ Pose copy and paste the whole pose. ⇄ Mirror flips it left↔right using L/R bone names. Onion shows ghosts of neighboring poses.

Easing

Select a key and set its ease: linear, ease in, ease out, ease in-out, step (hold), or custom curve… for a bezier with overshoot. Vary it on purpose: ease out for impacts, ease in for wind-ups, step for holds. Ease in-out everywhere looks floaty. The ◠ Graph panel shows each channel as a curve you can drag.

Motion presets

✨ Presets in the timeline (or Menu → Motion Presets…) adds a ready-made move as a new, editable clip: Idle, Walk, Run, Jump, Attack, Hit, Knock-out, Bounce, Pulse, Float, Wobble and Spin win. Set Faces, Strength and Speed first. Presets find body parts from bone names such as thigh_L; if a move bends the wrong bone, fix it under Bones used. Walk and Run need two legs, and Attack needs an arm.

IK and springs

Drag a limb's end bone with the ⛓ IK tool and the chain follows. For a foot or hand that stays planted, select the end bone and click ＋ Add IK target, then animate the target. Options include ⟲ Flip bend, ↔ Stretch, ⬍ Volume and a keyable mix. ⛓→🦴 Bake IK turns a clip's IK into plain keys.

Tick enable spring physics under 🌀 Spring (sway) in a bone's Inspector and its rotation lags behind the pose, so tails, hair and cloth follow the body. Tune stiffness, damping, gravity, motion and wind. Springs move only during playback; scrubbed frames show the raw pose. Never spring limbs or the core.

More tools

• 🚶 Make Cycle turns one animated stride into a full mirrored loop.
• 🤸 Poser builds an animation from a few captured poses.
• Swap image ◆ in the Inspector keys an image change (blinks, expressions), with an optional fade.
• ⚑ Event marks a moment for your game, with values or an audio cue name. Keyframe.it exports the cue; it doesn't play sound.
• ✨ Win FX keys one-click effect packs (glows, light rays, coin showers, payline streaks and more) into the win clip.
• 🔗 Transform, ∿ Path and 🎚 Sliders drive bones from other bones, splines or clips.

Skins, color and game markers

Skins

A skin is a swappable set of images, such as outfits that share one skeleton and its clips. Use the Skin bar in the Hierarchy: + creates a skin and makes it active. While a skin is active, image changes are recorded in that skin. Switch back to default to edit the base. Exports render the active skin, and Spine bundles include the skins.

Color and blending

Each part has a tint with alpha and an optional dark ◑ color (tint black), so light and dark areas tint separately. In Animate mode, changing them keys them, which gives you fades and hit flashes; set a color key's ease to step for hard blinks. blend can be normal, additive (glow), screen or multiply.

Clipping masks

The ▰ Clip tool turns a part into a polygon mask over the parts drawn after it, for windows, portals and wipes. hide inside inverts it, but Spine can't represent inverse masks.

Hit-boxes and anchor points

Both ride on bones, never draw, and export to Spine for your game to read. ▱ Box makes bounding-box polygons for hit detection (click an edge to add a point, Alt-click to remove one). ⌖ Point drops a named anchor with a facing, such as a muzzle-flash origin.

Problems and metrics

The ⚠ Problems button in the toolbar lists issues such as missing images, duplicate names and broken constraints. Click a row to jump to it; ✓ Fix all safe applies the safe fixes. The 📊 Metrics panel counts bones, meshes, vertices and springs and estimates draw calls.

Exporting

Open Menu → ⬇ Export…. The Preset menu (Choose a destination…) sets sensible options for PixiJS, Godot / Unity / Phaser, a website or a quick GIF. Or pick a format directly:

Spine bundle options

• format: Spine 4.2 for @esotericsoftware/spine-pixi-v8 (PixiJS 8), or Spine 3.8 for pixi-spine 3.x (PixiJS 6/7). The skeleton and runtime versions must match.
• bake fps: clips are baked to keys at this rate, so IK, springs and constraints carry over.
• resolution: 1×, 2× (retina) or 3× textures.
• Spine 4.2 only: Binary skeleton (.skel — smaller/faster), and Springs → live physics (experimental), which exports springs as Spine physics instead of baked keys and won't match the editor exactly.

Large projects split across several texture pages, all listed in the one .atlas; keep every file in one folder. test.html loads Pixi from a CDN, so it needs an internet connection. The PixiJS guide has loading code. Before you export, at the bottom of the dialog, flags blockers such as missing images or duplicate names.

Share a preview link

Share an animation preview in the Export dialog makes a link that plays every clip, with artwork scaled to at most 512 px. Short link with social thumbnail uploads a fixed public snapshot anyone with the link can view and remix. Long snapshot link — no upload carries the project inside the link. Either way it's a fixed snapshot, and existing copies can't be revoked.

Working with the other Studio tools

Keyframe.it is one of four tools in Keyframe.it Studio. Handoffs happen inside your browser; nothing is uploaded. The menu items stay disabled until your project has at least one clip.

Send to Sprite Puppeteer

Menu → Send to Sprite Puppeteer… renders the clips you tick as sprite sheets and opens them in Sprite Puppeteer as a character, ready to play-test in the arena and export for Godot, Unity or GameMaker. Choose Frame size (128–1024 px), Frame rate (8–24 fps) and Faces, and tick loops for cycles such as idle and walk. Your project here doesn't change.

Send to PixelForge

Menu → Send to PixelForge… (or the Open in switch in the same dialog) sends the sheets to PixelForge, which turns them into flicker-free pixel art on one shared palette. 256 px frames are plenty, since PixelForge shrinks them.

Open in Keyframe.it (from Sprite Puppeteer)

In Sprite Puppeteer, Export → Open in Keyframe.it brings a rigged sprite here as bones and clips. It opens as a new project; your other work stays in Projects.

If your browser blocks the new tab, the dialog shows an Open in … ↗ link to click instead. The Menu and toolbar also open the Studio tools themselves in a new tab, including MeshForge (image or prompt to a rigged 3D model).

AI: built-in tools and AI agents

The AI button in the toolbar offers built-in tools that use your own Anthropic API key, and a way to let your own AI agent drive the editor.

Built-in AI (your own key)

• ✨ AI Rig… places a skeleton on a character and slices the parts onto it. Choose the kind: One flat image, Parts on transparent bg, A part sheet, or ⚡ Parts already in the scene (after a PSD import). For the most reliable result, tick ✏️ Sketch the skeleton myself and click to place the joints. Best input: one character in a neutral A- or T-pose, limbs apart, on a plain background. The rig opens as a new project.
• ✨ AI Animate… generates keyframes for your rig from a description such as "wave hello, then drop the arm". 🎰 Symbol pack makes idle, win, drop and destroy clips in one go. Type a change in ↻ Refine ("bouncier") to replace the last clip.

Paste a key from console.anthropic.com into API key. It is stored only in this browser and sent straight to Anthropic, never to Keyframe.it's servers. Untick Remember on this device to keep it only until the tab closes. Pick a model and optionally Higher quality (thinking); the dialog shows an Estimated cost before you generate.

AI agents (keyframe-mcp and the scripting API)

An AI agent can rig, animate and export through the editor's scripting API, window.keyframe, and look at rendered frames to judge its work. Open AI → 🤖 Use with your AI…:

1. MCP server (easiest). Install the free connector with claude mcp add keyframe -- npx -y keyframe-mcp, or add {"mcpServers":{"keyframe":{"command":"npx","args":["-y","keyframe-mcp"]}}} to another MCP client. It needs Node 18+ and Google Chrome, and works in its own Chrome profile, so its projects are separate from your usual browser. Ask the agent to run keyframe_open_result to show you the result, or for a project JSON export you can open here.
2. Copy prompt gives a ready-made brief for any browser-driving agent, pointing it to the API reference at /llms.txt.

Agent edits are undoable. The agent walkthrough shows a good brief and how to check the result.

Saving, projects and backups

Every change autosaves to this browser. Browsers can clear a site's data when disk space runs low, so keep a file copy of work you care about.

• Ctrl+S (⌘+S) saves the project as a .json file. In Chrome and Edge you choose the file once; after that Ctrl+S writes straight into it, even after a reload. Other browsers download a file.
• Ctrl+Shift+S saves as a new file. Ctrl+O (or Menu → Open…) opens a project file.
• The chip beside the project tabs shows where you stand: 💾 Save a copy (browser only), ● with the file name (changes not in the file yet) or ✓ with the file name (up to date). Click it to save.
• Project tabs keep several projects open. ＋ adds one; double-click the active tab to rename it.
• Menu → 📁 Projects… lists every project saved in this browser. Rename the current one, 💾 Save now, start a ＋ New project, open or delete others. It shows whether the browser has agreed to keep your projects (Ask to keep them requests it), and ⬇ Back up all projects (.zip) downloads every project as .json files in one zip.
• Checkpoints (beside the project tabs) saves a named version before an experiment. Open copy opens it as a new project. Checkpoints live on this device only.

Everything is undoable with Ctrl+Z. Projects belong to one browser and profile. To move work to another browser or computer, save the .json and open it there.

Keyboard shortcuts

Shortcuts depend on where you are: the canvas, timeline, graph editor and image editor each have their own. Canvas keys are ignored while you type in a field. On a Mac, use ⌘ for Ctrl.

The image editor also has single-letter keys for most tools, such as V Move, W Wand, L Lasso, I Eyedropper and H Pan. The in-app Help (?) lists them all.

Troubleshooting and tips

• Imported images don't appear on the canvas. Menu → Import Images… and the slicer's Image library only option add to the library only. Use ✚ Scene in Images / Edit…, or + Slot on a bone.
• A part is invisible. Check the Inspector for "No image assigned", the 👁 Hide toggle in the Hierarchy, a zero scale, or a tint key with alpha at 0 (reset tint clears it).
• A meshed part warps when posed. Weight it fully to its own bone, or use 🧊 Make all parts rigid.
• Springs don't move while scrubbing. That's expected: they simulate during playback, and exports include their motion.
• The loop pops. The last pose differs from the first. Copy the 0 s pose with ⧉ Pose and paste it at the end.
• Spine export is blocked. Spine needs unique bone and part names; rename duplicates. Inverse clipping masks aren't supported and image crossfades are approximated, so compare with test.html.
• Nothing shows in the game. Match the runtime to the version (4.2 → spine-pixi-v8, 3.8 → pixi-spine 3.x), keep every .png page next to the .atlas, and if you use skins, set one by name in your code (README.txt shows how).
• "Send to Sprite Puppeteer" is greyed out. Make a clip first; Motion Presets can add one. If a character from Sprite Puppeteer arrives with "nothing was waiting", use Open in Keyframe.it there again.
• A .skel file won't import. Re-export from Spine as JSON and select the .json, .atlas and .png together.
• Check ⚠ Problems before exporting, and save a Checkpoint before big experiments. To report a bug or suggest a feature, use the ☕ menu.

Frequently asked

More answers about the whole Studio in the FAQ.