RR

rossark0/rossark-motion-skill

效率工作流

本页由 AI 翻译,技术细节请以原文为准。 查看原文

568 stars 质量 72 趋势 61MIT

将任何SVG转换为专业的60fps动画. Claude Code的技巧,能带来任何吸引生命的东西:活生生的面相,全身的演技和整个场景,在React Industrial和SwiftUI中.

概览

对于想将自己的应用和图画带入生机的设计师和工程师. 画画很容易 让它活着是很难的:它必须呼吸,环顾四周,眨眼,移动它的重量和行为,而永不冻或跳出. 这个技巧有助于你的经纪人到达那里。 它开始于我用来把应用中的插图带入生命的方法, 并发展成一种动画的方法: 人物和生物,植物,布,火,烟,水,天气,灯光,机器,图标,标志,图表和整个场景. 上面的动画被画出并完全用代码来作动画,其中的模板在此回波中. 要求一个代理将一个字符带入生命,它往往会将一个绘图换成另一个,所以面孔从一个表达式传送到另一个表达式. 它用它自己放轻松的t来穿过每个姿势,所以身体在每一个姿势上都停止了死亡. 一切都是同步的 就像机器一样.

概述(AI 翻译)

对于想将自己的应用和图画带入生机的设计师和工程师.

画画很容易 让它活着是很难的:它必须呼吸,环顾四周,眨眼,移动它的重量和行为,而永不冻或跳出. 这个技巧有助于你的经纪人到达那里。

它开始于我用来把应用中的插图带入生命的方法, 并发展成一种动画的方法: 人物和生物,植物,布,火,烟,水,天气,灯光,机器,图标,标志,图表和整个场景.

上面的动画被画出并完全用代码来作动画,其中的模板在此回波中.

□ 安装

□为甚么用.

特工们不像动画师那样动画

要求一个代理将一个字符带入生命,它往往会将一个绘图换成另一个,所以面孔从一个表达式传送到另一个表达式. 它用它自己放轻松的t来穿过每个姿势,所以身体在每一个姿势上都停止了死亡. 一切都是同步的 就像机器一样 闪闪发光的闪闪发光 闪闪发光的闪闪发光

所有这些小东西加起来,结果看起来像是幻灯片而不是活的东西.

本页由 AI 翻译,技术细节请以原文为准。

README

以下为原文 README 节选,完整内容请查看原文。

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.
在 GitHub 查看完整 README

推荐工具

换一个关键词,或者移除筛选条件。

安装

npx skillfish add rossark0/rossark-motion-skill
新手?先看 mcpskill.org 教程 →