Animation Stage

Selection

Basic Shapes

More Shapes

Advanced Shapes

Lines & Arrows

Freehand

Content

Emoji Library

Icon Library

People

Gestures & Actions

Animals

Anatomy

Sports

Transport

Business & Presentation

Objects

Nature

Symbols

Custom

Animated Parts

Drop animated body parts onto the stage. Edit points, colors & size to match your image or icon. Parts come with pre-built looping animations.

Selected Animated Part

No animated part selected

Speed 1.00x Distance 1.00x Bounce 1.00x Approach Depth 0.00 Far Scale 1.00x Near Scale 1.00x Approach Lift 0px Head Pitch 0.00 Torso Pitch 0.00

Use Speed, Distance, Bounce, and the approach controls for whole-part motion. Head Pitch and Torso Pitch fake front-view depth. Use Edit Pieces for local shape, color, and per-piece adjustments.

Saved Presets

Full Characters

Limbs & Body Parts

Face & Expression

Animal Parts

Actions & Gestures

Stage

Stage Settings

Orientation

W H

Grid

Show

Snap

BG Type

BG Color 100%

Background Library 0

Advanced — load remote library

Paste a JSON manifest URL matching the local assets/backgrounds/manifest.json schema. Persisted locally.

Slide Layouts Click to preview live

No objects on stage

Use tools to add shapes, text, or images

Select an object

Click on a stage object to edit its properties

Describe your animation

Press / to browse commands · ⌘↵ to generate · ↑ for history

Prompt Writing Guide

Quick Formula

action + target + modifiers

e.g. spin the red circle slowly clockwise

Targeting Objects

by color + type	the red circle, blue squares
by name	any part of the object's name
by position	top, bottom-left, center
all of a type	all circles, all shapes
pronouns	it, them, the object (refers to last target)

Creating Objects

Start with: create, add, draw, or place

shapes	circle, square, triangle, star, diamond, heart, arrow, line, rounded rectangle, parallelogram, trapezium, hexagon, heptagon, pie, chord, teardrop, L-shape, can, plaque, cube, doughnut, block arc, brace, bracket, bent arrow, U-turn arrow, quad arrow, up-down arrow, up arrow callout, elbow arrow connector
sizes	tiny, small, big, large, huge
colors	red, blue, green, yellow, purple, orange, pink, cyan, magenta, white, black, gray
position	at the top-right, in the center, at the bottom
text	create a text saying "Hello"

create a big red star at the top-left

Animations

entry	fade in, zoom in, bounce in, fly in from left, slide in, spin in, flip in, wipe, rise, float, grow
exit	fade out, zoom out, fly out to right, slide out, shrink, collapse, sink
emphasis	pulse, shake, wobble, bounce, flash, rubber, tada, jello, heartbeat, swing, shimmer, blink
movement	move left/right/up/down, float, drop, zigzag, topple
rotation	spin, rotate, turn, wobble, flip, swing
scale	make bigger/smaller/huge/tiny, pulse, pop in, squash, stretch
opacity	fade in, fade out, blink, dissolve, flicker
path	move in a circle, along a figure 8, in an s-curve, orbit
text	typewriter, letter spin, word fade, line reveal

make the blue square bounce and shake slowly

Modifiers

speed	slowly, fast, quickly, gently, rapidly — or for 2 seconds, in 0.5s
repeat	twice, 3 times, 5x, forever, loop, continuously
direction	clockwise, counter-clockwise, left, right, up, down
distance	200px, 300 pixels, 500 distance
rotation	90 degrees, 360deg, 180°
easing	with bounce, elastic, smoothly, linear, ease in, ease out

rotate it 360 degrees fast with bounce 3 times

Multi-Step Sequences

Use then, next, or after that to chain actions. Use it to refer to the previous target.

create a red circle, then make it bounce twice, then spin it clockwise forever

fade in the star slowly. then move it right 300px. after that make it pulse

create a blue square at the top-left, then make it drop, then slide it right 400px

Icons

Say add or insert + icon name. 80+ pre-built SVG icons.

people	male, female, boy, girl, baby, elderly man, elderly woman, team, presenter, wheelchair user
gestures	hand raised, thumbs up, pointing right, clapping, handshake, waving
animals	dog, cat, bird, fish, horse, butterfly, elephant, rabbit, dolphin, lion
business	presentation screen, bar chart, pie chart, briefcase, target, megaphone, trophy, rocket, lightbulb, globe
transport	car, bus, bicycle, airplane, boat, truck
objects	house, tree, chair, table, phone, laptop, book, clock, camera
nature	sun, cloud, mountain, flower, water drop, leaf
symbols	checkmark, cross, plus, arrow right, lightning, speech bubble, gear, music note, flag, eye

add a male icon

Characters & Animated Parts

Build rigged characters or add pre-animated body parts with walk/run cycles.

build	build a human character, assemble a character
walk cycles	male walk side, male walk front, female walk side, female walk front
run cycles	male run side, female run side
other	baby crawl
limbs	legs walk, arms swing (side & front, regular & segmented)
face	blinking eyes, talking mouth, eyebrow raise
animals	wagging tail, quadruped walk/run/hop, flapping wings, rodent walk/run
actions	hand wave, jump, arms raise, head nod, head shake, clapping hands
templates	list character templates to browse all available

add a walking man

Joints, Deform & Flex

Joint assembly is the main character-animation path. Use Body Stencil for one full human image, Smart Cut for traced single-image parts, Guided Assembly / Joint Assembly for separated parts, and Image Deform when you need to warp one flat image directly.

joints	Hinge-style joints for bending shapes and rotating cutout parts
which workflow	Ask AI things like which character workflow should I use for one full image? to get the right setup path before you start.
face rig	For one selected face image, use show me the practical face rig workflow to get fit/apply/check/preview/record guidance before animating dialogue.
guided assembly	Guided joint setup for separated body parts. For one full image, use Body Stencil or Smart Cut first.
joint assembly	Assemble body-part images into articulated characters. 6 presets: Human Front, Human Side, Quadruped, Bird, Spider, Fish. Auto-detects parts by name.
joint movements	Pre-built movement and pose-hold presets such as Wave, Walk / March, Strongman Flex, Combat Idle, and Celebrate. Applied per-part as timeline bars.
character poses	Save, load, blend, copy across, mirror, randomize, ragdoll, and reset assembled-character poses from the Joints section. Human Front built-ins here are static poses; animated versions also exist in Movements.
body tags	Persistent character landmarks such as eyes, nose, sternum, waist, fingertips, and toes. Auto-tags assembled presets, supports custom points, and keeps the points relative to the tagged body part as the character moves.
copy across	Select source joints on one side, then click Copy Across to duplicate their mirrored angles onto the opposite side without changing the source.
tune joints	Visually adjust anchors (blue diamonds) and pivots (orange circles) after assembly. Save as Template for reuse.
train from stage	Capture manually tuned joint positions as training data. Future assemblies auto-apply trained values.
body stencil	Fit a ready-made body map to one full image, then cut and assemble parts automatically.
smart cut	Trace & cut body parts from a single image with edge-snapping, or auto-trace silhouette-based preset parts on supported human templates, then auto-assemble with joints.
image deform	Warp one flat image with Deform Pins, Influence Bones, and mesh deformation. Best for squash, stretch, and localized warping.
flex tool	Arc bending with anchor points. Preserve Texture bends the rendered surface so images, patterns, and gradients keep their skin while curving.
templates	Save joint configurations as reusable templates; load onto other objects

These tools are used via the Properties panel (select an object → Image Tools / Joints / Flex sections). AI can animate objects that already have joints or image-deform controls applied, and you can ask Teach Me for workflow advice if you are unsure which path fits.

Groups, Layers & Pinning

group	group all selected objects — combine objects (Ctrl+G)
ungroup	ungroup the selection — split group apart
layers	Multi-layer system with visibility and lock controls
pinning	Pin child objects to a parent so they follow its movement and optionally inherit rotation
alignment	Align left/right/center, distribute horizontally/vertically

group the circles

Advanced Tools

eraser	Brush-based eraser for images & object eraser (shape-based) for removing parts
boolean ops	Union, subtract, intersect, combine (XOR), fragment — select 2+ shapes
slice	Cut objects into pieces along a drawn path
path animation	Move objects along the outline of another shape
point edit	Edit individual vertices of freeform/path objects
auto trace	Convert raster images to editable outlines or grouped vector shapes
vector import	Import SVG, EPS, AI, PDF files as editable shapes
format painter	Copy fill, stroke, shadow, glow from one object and paint onto others
select similar	Select objects matching type, color, size, stroke, or opacity
background removal	Auto-remove image backgrounds by sampling corner colors
image crop	Interactive crop with draggable handles
save as icon	Merge selected shapes into a reusable custom icon
save as image	Download any object as a PNG file
paste as image	Merge selected objects into a single image
swap	Swap positions of exactly 2 selected objects
copy properties	Right-click object → Copy Properties. Copies readable text + JSON payload, including Stage Angle, Stage ±180, From Down, joint angle, X/Y tilt, pin target, parent joint, pin offset, pin rotation mode, and any Body Tags stored on that object. Paste as Clone creates an exact duplicate on stage.
copy all properties	Right-click empty stage → Copy All Properties. Exports a 49-column tab-separated table of all objects, including pin target/joint/rotation fields, joint details, transformed corners, Stage Angle, Stage ±180, From Down, and Body Tags for spreadsheet audits.
pin to joint	Use the Object Attachment section: choose a Parent Object, optionally choose a Parent Joint, then set Rotation Mode to Align with Parent or Joint if the child should follow the parent joint angle.
assets library	Use the Assets toolbar button to browse, preview, upload, search, delete, and import filesystem-backed library items. Right-click any object to Save to Assets Library.
search assets	AI mode can list and search library items, for example `list assets`, `search assets for torso`, or `import torso on stage`.
pose armature skin	In Pose Armature, Place Overlay adds a temporary alignment image over the rig, while Sample Selected bakes the selected image into the armature parts as the actual skin.
pose armature template	After skinning a rig, use Save Template to store that armature look. On a similar front, side, or generic rig, choose the saved entry and click Apply to reuse it.
dummy transparent	Inside Pose Armature, use Transparent to show unsampled dummy rigs as low-fill overlays with visible borders, or Solid to switch them back to block shapes.
front dummy armature	Use Joints → Front Dummy or the same button inside Pose Armature to create a reusable front-view rig with torso, head/neck, left/right arms, and left/right legs before using Sample Selected or Place Overlay.
side dummy armature	Use Joints → Side Dummy or the same button inside Pose Armature to create a reusable side-view rig with torso, head/neck, one side arm, and front/back legs before using Sample Selected or Place Overlay.
side 2 arms	Use Side 2 Arms when a profile character needs both a Front Arm and a Back Arm. If one profile arm or leg is hidden in the source image, the sampler can reuse the visible counterpart as fallback.
down 0	In Transform, Down → 0° rotates the selected object so its visible direction points straight down, then bakes that as the new 0° baseline. Best for front-facing limbs.
reset joints	In the left-panel Joints section, Reset All 0° returns the selected rig's internal and assembly joints back to zero without deleting them.
clear timeline	The timeline trash button Clear Timeline removes every animation bar after a confirmation prompt.
measure tool	Shows pixel distances from objects to stage edges and gaps between nearby objects on hover.
app search	Ctrl+/ (Cmd+/) — Spotlight-style finder for all tools, buttons, sections, tabs, properties, and inputs.

Scenes & Export

scenes	Multi-scene/slide support with transitions. PageDown/PageUp to navigate.
export HTML5	Self-contained HTML with controls, autoplay, loop, responsive, transparent BG
export video	MP4, WebM, or GIF — custom resolution, FPS, dithering
export code	JavaScript or Python code generation
save project	Save/load .animstage project files

Key Shortcuts

Ctrl+M	Toggle AI mode
Ctrl+G	Group / Ctrl+Shift+G Ungroup
Space	Play/Pause animation
? key	Show all keyboard shortcuts
V R C T S	Select, Rectangle, Circle, Triangle, Star tools
Ctrl+Enter	Submit AI prompt (in AI mode)
/ key	Open command search (when AI prompt is empty)

Try These

spin all circles slowly make it bounce forever fade in from left create a big red star typewriter the text add a male icon create a slim nurse character with black hair create a linked universal character with front side and back views add a walking man show me the practical face rig workflow list character templates group all selected objects stagger fade in all shapes dramatic entrance

Stage Awareness

Objects: 0

Stage: 1920 × 1080

Tags: 0

Execution Preview

Recent AI Animations

No cached animations yet

Position Tags

Object Tags

Zone Tags

Select the character or object first. Test previews on the stage without saving. Apply writes the animation to the timeline. JavaScript runs in the browser; Python is for copy/export only.

Scope: Auto

Apply at timeline cursor

// Animation code will appear here
// Select an object and apply animations to see generated code

// You can also write custom code:
// stage.getObject("obj_001").animate({
//     x: 500,
//     y: 300,
//     duration: 1000,
//     easing: "easeInOut"
// });

Code Templates

Bounce Animation

Orbit Animation

Particle System

Wave Motion

Stagger Sequence

Loading your stage...

Color Palette

Action Plan

Loading your stage...

Keyframe Curve Editor