アプリや図面を生命に持ちたいデザイナーやエンジニアに。

ドローイングの移動は簡単です。 生き生き生きることは困難です:それは呼吸し、周りを見て、点滅し、重量をシフトし、行動し、凍結またはジャンプすることなく。 このスキルは、あなたのエージェントがそこに取得するのに役立ちます。

自分のアプリでイラストを生命に持って来るために使用した方法として始まり、キャラクターやクリーチャー、植物、布、火災、煙、水、天気、ライト、マシン、アイコン、ロゴ、チャート、シーン全体など、何でもアニメーション化する方法に成長しました。

上記のアニメーションは、このリポジトリのテンプレートで、コード内で完全に描画され、アニメーション化されます。

インストール

なぜ使うのか?

エージェントはアニメーターのようにアニメーションしません。

キャラクターを生命に持ち込むためにエージェントに依頼すると、多くの場合、別の図を1つ交換するので、顔は1つの式から次へテレポートを呼び出します。 それぞれのポーズを通して、簡単に噛み合っているので、体はあらゆるポーズで死者を止めます。 マシンのように、すべてが同期で動く。 Blinksは、彼らがフリッカー、すべてのバウンス、そして2つの形状が満たす顔を渡る細いラインショーを短くするほど短くなっています。

これらの小さなものがすべて追加され、結果は何かの代わりにスライドショーのように見えます.

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.