Animate Drawings That Feel Alive with the Motion Skill

What the Motion Skill Does

The Motion For Anything You Draw skill helps designers and engineers animate code-drawn artwork so it feels alive rather than like a sequence of swapped illustrations. It applies to characters, creatures, plants, cloth, fire, smoke, water, weather, lights, machines, icons, logos, charts, and complete scenes.

The project focuses on the details that make animation believable: one clock for the entire scene, movement around real pivots, trailing parts that follow a beat later, continuous idle life, smooth paths through key poses, restrained amplitudes, and strong timing curves.

It also addresses common problems in agent-generated animation. Instead of letting every pose use an independent eased tween, the skill encourages coordinated motion, natural transitions, readable blinks, stable contacts, and subtle secondary movement.

Install the Skill

Install the skill with the skills command:

npx skills@latest add rossark0/rossark-motion-skill

After installation, the skill provides reference material, reusable templates, analysis tools, and example scenes. The included engine supports both React Native and SwiftUI templates.

Understand the Repository

Read the main skill guide

Start with SKILL.md. It describes the core principles, recipes for different subjects, live faces, full-body acting, scene-based actions, interface motion, common pitfalls, reference-video analysis, and the recommended workflow.

Create project-specific motion notes

Copy MOTION.md next to your artwork and complete Part 2 as you work. Record where the animation code lives, the rules your project follows, what the artwork cannot do, and how you verify changes. The skill reads this file first, so it gives the agent important project context before it modifies or creates motion.

Choose an animation engine

The repository includes an engine for each supported UI framework:

• motion.ts for React Native.
• Motion.swift for SwiftUI.

The engine includes loop and one-shot clocks, track, flow, seg, wave, loop, bell, seeded, and motion curves. Use the accompanying live-face templates when your drawing needs animated eyes and mouths.

Build an Animation Step by Step

1. Describe the artwork and its limits. Use MOTION.md to document the existing drawing structure, available geometry, and constraints.
2. Break the scene into parts. Identify the body, head, limbs, props, shadows, facial features, and secondary elements. Decide which parts rotate around real pivots and which parts should trail.
3. Choose a shared clock. Coordinate the scene from one timeline rather than giving each element an unrelated tween. This keeps contacts and reactions synchronized.
4. Define key actions. Plan events such as entering, landing, kicking, blinking, looking, waving, growing, or settling. Connect these poses with smooth motion using the available engine helpers, including flow for movement through key poses.
5. Add secondary motion. Let heads, forearms, pigtails, hats, cans, shadows, or other loose parts follow the primary action with a slight delay.
6. Check contacts. Make sure feet meet the ground, hands remain attached to handles, thrown objects begin and end at the correct positions, and impacts preserve the drawing’s volume.
7. Review the result frame by frame. Use the repository’s analysis tools and rendered output to find motion that is too small, too abrupt, or incorrectly timed.

Use the Live-Face Templates

liveFace.tsx and LiveFace.swift provide live eyes and mouths that glide, blink, and smile. You supply the geometry and colors, allowing the template to add facial movement without requiring a separate drawing for every expression.

Keep facial changes readable and continuous. Avoid extremely short blinks that look like flickers, and avoid switching directly from one expression to another. Small eye movements and a slight delay between the head and gaze can make a character feel more attentive.

Study the Included Examples

Reveal

The Reveal scene demonstrates full-body acting in a phone frame. A silhouette floats in with dangling feet, a child falls with gravity and squashes on landing, a ball rolls in, the eyes follow it, and the character kicks, turns, waves, and continues idling. The sequence is a nine-second loop at 60 frames per second and uses one scene clock.

Garden

The Garden scene combines character acting with environmental change. Water drops follow seeded arcs, soil darkens, a stem grows in two pushes, leaves unfurl in sequence, petals open with a twist, and a butterfly lands while the stem responds to its weight. The character’s head and eyes track the butterfly, while the pigtails, hat, and watering can trail the movement.

Chef

The Chef scene shows timing, gravity, anticipation, surprise, and contact. A pancake flips, lands with squash, then goes too high on the second attempt, hits the chef’s hat, wobbles, slides off, and is caught in the pan. Steam and flame movement use additional waves, while the hand is solved onto the handle.

Orbit

The Orbit scene demonstrates depth ordering. Cards orbit around a bird, appearing in front, behind, or edge-on according to their position. The bird floats and tilts, its wings flutter, its feet and tufts follow through, and sparkles appear at seeded times during the loop.

Render the SwiftUI Demos

On macOS 14 or later, compile the SwiftUI templates and demo scenes with:

swiftc -parse-as-library -target arm64-apple-macos14 templates/swiftui/Motion.swift templates/swiftui/LiveFace.swift demo/*.swift -o /tmp/render-demo

Render the Reveal scene as 60 frames per second into a frames directory:

/tmp/render-demo reveal /tmp/frames phone fps=60

Use garden, chef, or orbit instead of reveal to render the other scenes. Convert a rendered frame sequence into an MP4 with FFmpeg:

ffmpeg -framerate 60 -i /tmp/frames/%04d.png -c:v libx264 -pix_fmt yuv420p -crf 20 demo/reveal.mp4

Rendering gives you a consistent way to inspect the complete timeline, compare revisions, and verify that the animation remains stable at the target frame rate.

Analyze Reference Motion

When you have a reference video, study it before building. Small movements that are difficult to see in real time can determine whether the result feels grounded or mechanical.

• sheet.sh creates contact sheets from a video at its full frame rate, making timing and frame-to-frame changes easier to inspect.
• track_edges.py measures a subject’s edges frame by frame, helping reveal subtle jiggles, floating, and swaying.
• sample_colors.py reads exact colors from a video frame.

Use these measurements to identify the timing, amplitude, and spacing of motion before translating it into code. A reference may feel alive because of a small weight shift, a delayed follow-through, or a barely visible change in silhouette.

Advanced Motion Tips

Favor coordinated timing

Use one clock for the scene and let related actions share timing relationships. A kick, eye movement, head turn, and ball trajectory should communicate the same event rather than appear as independent animations.

Use follow-through and anticipation

Secondary parts should not always stop when the main body stops. Let loose elements continue briefly, settle, or react to acceleration. This is especially useful for hair, pigtails, hats, clothing, limbs, shadows, and carried objects.

Keep idle life running

Characters and scenes should not freeze between major actions. Subtle breathing, blinking, floating, swaying, or other low-amplitude motion can keep a loop alive without distracting from the main action.

Preserve volume during impacts

Squash and stretch should support the drawing rather than distort it arbitrarily. The Reveal and Chef examples use squash at landings while keeping the character or object recognizable and connected to the scene.

Use seeded variation when repetition matters

For repeated details such as sparkles or water drops, use seeded behavior when the motion must vary while remaining reproducible. Reproducible timing makes debugging and rendering comparisons easier.

Apply interface-motion guidance

For motion in an interface, consult the principles referenced by the project, including Emil Kowalski’s skills and Benji Taylor’s Family values. Keep interface movement purposeful and consistent with the surrounding design.

Conclusion

The Motion skill provides a practical foundation for turning code-drawn artwork into expressive animation. Install it with npx, document your project in MOTION.md, build around a shared clock, use the React Native or SwiftUI templates, and inspect the result with rendered frames and analysis tools. The central goal is simple: connect poses smoothly, coordinate the whole scene, and give every part the timing and follow-through it needs to feel alive.