rossark0/rossark-motion-skill

해결하는 문제

그림을 움직이는 것은 쉽지만, 살아있는 것처럼 느끼게 하는 것은 어렵습니다. 순진한 애니메이션은 슬라이드쇼처럼 보입니다. 얼굴은 표정 사이를 순간이동하고, 몸은 각 포즈에서 완전히 멈추고, 모든 것이 동시에 움직이고, 깜빡임은 깜빡이고, 모양에는 이음매가 보입니다. 이 스킬은 실제 애니메이터가 사용하는 원칙을 코드화하여 이러한 문제를 해결하므로 AI 에이전트가 숨 쉬고, 주위를 살피고, 체중을 이동하고, 얼거나 점프하지 않고 연기하는 모션을 생성할 수 있습니다.

작동 방식

이 스킬은 일련의 규칙, 템플릿 및 도구를 제공합니다. 전체 장면에 하나의 클록을 사용하여 모든 부분이 같은 시간에 움직입니다. 부품은 실제 피벗을 중심으로 회전하고, 뒤따르는 부분은 한 박자 늦게 따라가며, 유휴 생명은 결코 멈추지 않습니다. 키 포즈를 통과하는 부드러운 경로를 정의하며, 작은 진폭과 강한 곡선을 사용합니다. 참조 비디오가 있으면 포함된 도구를 사용하여 모션을 프레임별로 측정합니다. 무언가를 살아있게 느끼게 하는 미묘한 움직임은 눈에 보이지 않을 정도로 작은 경우가 많기 때문입니다. 인터페이스 모션의 경우 Emil Kowalski와 Benji Taylor의 확립된 디자인 규칙을 따릅니다. 저장소에는 전체 스킬 문서(SKILL.md), 프로젝트용 메모 파일(MOTION.md), React Native 및 SwiftUI용 즉시 사용 가능한 애니메이션 엔진, 라이브 페이스 컴포넌트, 콘택트 시트 생성, 가장자리 추적 및 색상 샘플링 도구가 포함되어 있습니다. 데모는 템플릿으로 렌더링된 완전히 코딩된 애니메이션 장면입니다.

대상 사용자

앱과 그림에 생명을 불어넣고 싶은 디자이너와 엔지니어. 특히 AI 코딩 에이전트를 사용하여 캐릭터, 생물, 식물, 천, 불, 연기, 물, 날씨, 빛, 기계, 아이콘, 로고, 차트 및 전체 장면을 애니메이션화하는 모든 사람에게 유용합니다. 에이전트가 초보자 수준의 애니메이션 실수를 저지르지 않도록 합니다.

주요 기능

• 전체 장면에서 공유되는 하나의 클록이 기계적이고 동기화되지 않은 모션을 방지합니다.
• 부품은 실제 피벗을 중심으로 회전하고 뒤따르는 부분은 지연되어 따라가므로 자연스러운 후속 동작이 생성됩니다.
• 유휴 생명(호흡, 깜빡임, 체중 이동)은 동작 사이에도 계속됩니다.
• 부드러운 flow 곡선은 각 포즈에서 멈추는 대신 키 포즈를 통과합니다.
• 참조 비디오를 프레임별로 측정하여 눈에 보이지 않을 정도로 작은 모션을 캡처할 수 있습니다.
• React Native(motion.ts) 및 SwiftUI(Motion.swift)용 즉시 사용 가능한 엔진 템플릿이 포함되어 있습니다.
• 라이브 페이스 컴포넌트(LiveFace.tsx / LiveFace.swift)는 미끄러지듯 움직이고, 깜빡이고, 미소 짓는 눈과 입을 생성합니다.
• 완전히 코드로 60fps로 렌더링된 4개의 전체 데모 장면(Reveal, Garden, Chef, Orbit)이 함께 제공됩니다.