Для дизайнеров и инженеров, которые хотят воплотить в жизнь свои приложения и рисунки.

Делать ход рисунка легко. Заставить его чувствовать себя живым трудно: он должен дышать, озираться, моргать, менять свой вес и действовать, не замерзая и не прыгая. Этот навык поможет вашему агенту добраться туда.

Это началось как метод, который я использовал, чтобы оживить иллюстрации в моем приложении, и превратилось в способ оживить все, что нарисовано: персонажей и существ, растений, ткани, огня, дыма, воды, погоды, света, машин, иконок, логотипов, диаграмм и целых сцен.

Анимация выше нарисована и анимирована полностью в коде, с шаблонами в этом репо.

##Установка

Зачем его использовать?

Агенты не анимируют, как аниматоры.

Попросите агента оживить персонажа, и он часто меняет один рисунок на другой, поэтому лицо телепортируется от одного выражения к другому. Он проходит через каждую позу с собственным ослабленным подростком, поэтому тело останавливается мертвым при каждой позе. Все движется синхронно, как машина. Мгновения настолько короткие, что они мерцают, все отскакивает, и тонкая линия показывает по всему лицу, где встречаются две формы.

Все эти мелочи складываются, и результат выглядит как слайд-шоу вместо чего-то живого.

Motion For Anything You Draw

For designers and engineers who want to bring their apps and drawings to life.

Making a drawing move is easy. Making it feel alive is hard: it has to breathe, look around, blink, shift its weight and act, without ever freezing or jumping. This skill helps your agent get there.

It started as the method I used to bring the illustrations in my app to life, and grew into a way to animate anything drawn: characters and creatures, plants, cloth, fire, smoke, water, weather, lights, machines, icons, logos, charts and whole scenes.

The animation above is drawn and animated entirely in code, with the templates in this repo.

Install

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

Why use it?

Agents don’t animate like animators.

Ask an agent to bring a character to life and it will often swap one drawing for another, so the face teleports from one expression to the next. It moves through each pose with its own eased tween, so the body stops dead at every pose. Everything moves in sync, like a machine. Blinks are so short they flicker, everything bounces, and a thin line shows across the face where two shapes meet.

All these small things add up, and the result looks like a slideshow instead of something alive.

This skill lists those mistakes and how to fix them: one clock for the whole scene, parts that turn around their real pivots, trailing parts that follow a beat later, idle life that never stops, smooth paths through key poses, small amplitudes and strong curves. When you have a reference video, it measures the motion frame by frame before building, because what makes a reference feel alive is often too small to see.

For motion in an interface, it follows Emil Kowalski’s rules and Benji Taylor’s Family values.

Reference

• SKILL.md: The skill. Principles, recipes for every kind of subject, live faces, full-body acting, scenes that tell an action, motion in an interface, pitfalls, working from a reference video, and a workflow.
• MOTION.md: A notes file for your project. Copy it next to your art and fill in Part 2 as you go: where the code is, your rules, what your art can’t do, and how you check changes. The skill reads it first.
• motion.ts and Motion.swift: The engine, for React Native and SwiftUI. Loop and one-shot clocks, track, flow (smooth acting through key poses), seg, wave, loop, bell, seeded and the curves.