디자이너와 엔지니어는 앱과 그림을 삶에 가져와야 합니다.

그림 이동을 만드는 것은 쉽습니다. 그것이 살아가는 것은 어렵다 : 그것은 호흡, 주변을보고, blink, 그 무게를 이동하고 행동, 심지어 얼거나 점프없이. 이 기술은 당신의 대리인이 거기 얻을 것을 돕습니다.

그것은 내 앱에서 인생에 일러스트를 가져 와서 그려내는 방법에 자랍니다 : 문자와 생물, 식물, 천, 화재, 연기, 물, 날씨, 조명, 기계, 아이콘, 로고, 차트 및 전체 장면.

위의 애니메이션이 그려지고 완전히 코드에서,이 저장소의 템플릿과.

설치

왜 그것을 사용합니까?

에이전트는 animators처럼 되지 않습니다.

생명에 대한 문자를 가져 와서 다른 한 번의 그림을 교체 할 것입니다, 그래서 얼굴은 한 번의 표현에서 다음. 그것은 그것의 자신의 쾌활한 tween를 가진 각 pose를 통해서 이동합니다, 그래서 몸은 각 pose에 죽은 중지합니다. 기계와 같은 동기화에서 모든 움직임. Blinks는 너무 짧게 그들은 흔들림, 모든 반송, 그리고 두 모양이 만나는 얼굴의 맞은편에 얇은 선 쇼.

이 모든 작은 것들을 추가, 그리고 결과는 뭔가 살아 대신 슬라이드 쇼처럼 보인다.

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.