Communitygithub.com

hamgarian/remotion-product-motion

읽기 쉬운 Remotion 제품 데모, 앱 쇼케이스, UI 광고를 제작, 수정 또는 검토합니다. 목적에 맞는 동선, 정확한 인터페이스 콘텐츠, 결정론적 애니메이션, 선택적 사운드를 포함합니다.

remotion-product-motion란 무엇인가요?

이 스킬은 Remotion을 사용하여 제품 상호작용을 명확한 시각적 스토리로 전환하는 방법을 제공합니다. 컨텍스트 설정, 동작 표시, 결과를 읽기 쉽게 만든 후 다음 동작으로 주의를 전환하는 과정을 강조합니다. 촬영 계획, 결정론적 애니메이션, 카메라 움직임, 사운드 통합 등에 대한 구체적인 지침을 포함합니다. Claude Code, Cursor, Codex 등 AI 에이전트가 Remotion 프로젝트를 빌드, 검사, 전달할 때 일관된 품질과 가독성을 유지하도록 돕습니다.

지원 대상~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/hamgarian/remotion-product-motion/tree/HEAD/skills/remotion-product-motion

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

Remotion 제품 모션

제품 상호작용을 명확한 시각적 스토리로 전환하세요: 컨텍스트를 설정하고, 동작을 보여주며, 결과를 읽기 쉽게 만든 후 다음 동작으로 주의를 전환합니다. 모션은 브리프에 맞게 조정하세요. 정적 샷, 무성 필름, 절제된 전환, 연속적인 카메라 이동 모두 유효한 선택입니다.

필름 설정

대상, 제품 결과, 지속 시간, 치수, 필요한 화면, 제공된 에셋을 식별합니다. 사운드, 카메라 움직임, 기본 UI 동작, 캡션에 대한 명시적 선택을 유지합니다. 누락된 필수 사항은 해결하고, 부수적인 스타일링은 합리적인 기본값을 선택합니다.

주장을 계획하기 전에 실제 인터페이스와 사용 가능한 콘텐츠를 검사합니다. 인식 가능한 타입, 비율, 색상, 레이블, 상호작용 동작을 보존합니다. 정식 승인된 에셋을 사용하고, 합성 데모 데이터에는 레이블을 붙입니다. 광고된 카운트의 출처와 스냅샷 날짜, 카운트된 단위, 필터, 중복 제거 방법을 기록합니다. 대표적인 하위 집합만으로 전체 카탈로그 주장을 입증할 수 없습니다.

각 샷의 프레임 간격, 초점 대상, 동작/결과, 읽기 간격, 전환, 선택적 사운드 큐가 포함된 간결한 샷 계획을 작성합니다. 종료를 포함합니다. 두 가지가 모두 요청된 경우 가로 및 세로 프레이밍을 별도로 계획합니다. 크롭만으로는 컨트롤이나 레이블이 사라질 수 있습니다.

관련 지침 선택

  • 카메라 이동, 이징, 중첩 전환, 레이아웃 또는 커서 대상을 조정할 때는 choreography를 읽습니다.
  • 애니메이션, 기본 CSS 동작, 모션 블러, 개별 화면 간 하드 컷을 구현할 때는 deterministic UI를 읽습니다.
  • 오디오 배치, 내보내기 최적화, 전달된 필름 검증 시에는 sound and rendering를 읽습니다. 해당 시각적 검증 섹션은 무성 작업에도 적용됩니다.

유용한 경우 재사용 가능한 수학을 위해 scripts/motion.mjs를 사용하세요. 종속성 없음; 적절한 상대 경로로 대상 프로젝트에 복사하거나 가져옵니다. 통합 전에 내보내기와 인수 계약을 검사합니다. progress, expoIn, expoOut, track은 타이밍을 처리하고; cameraAt과 project는 구성된 프레이밍 평가에 도움을 주며; selectState는 컷을 선택하고; cueStartFrame과 duckGain은 오디오 배치에 도움을 줍니다. 헬퍼 파일은 선택 사항이며 Remotion 프로젝트를 생성하지 않습니다. 이 스킬은 어떤 저장소 데모와도 독립적으로 작동합니다.

빌드 및 검사

애니메이션을 프레임과 고정 입력의 순수 함수로 만듭니다. 시간 샘플링 외부에서 개별 화면 선택을, 내부에서 연속 애니메이션 훅을, 외부에서 오디오를 보존합니다. 이 구분과 크로스페이드 예외에 대해서는 결정론적 참조를 참조하세요.

먼저 대표적인 동작 하나와 핸드오프를 구현합니다. 패턴을 반복하기 전에 읽기 간격, 속도 피크, 컷 경계, 목적지에서 렌더링된 프레임을 검사합니다. 동작이 명확하지 않으면 타이밍, 스테이징 또는 계층 구조를 변경합니다. 장식으로는 누락된 인과 관계를 제공할 수 없습니다.

카메라 움직임은 컨텍스트를 드러내거나 주의를 안내해야 합니다. 지속적인 이동이 브리프에 적합하면 독립적으로 타이밍이 조정된 팬 및 돌리 트랙을 중첩하고 예상 결과를 검사합니다. 움직이는 부모가 화면에서 초점 객체가 움직인다는 증거는 아닙니다. 브리프에 도움이 될 때는 조용하거나 완전히 정적인 홀드를 선택합니다. 그레인, 브리딩, 셰이크, 영구 모션은 선택적인 미적 결정입니다.

레이아웃을 편집한 후에는 다운스트림 흐름, 카메라 대상, 커서 히트 포인트, 스크롤 경계, 프레이밍을 재평가합니다. 성공적인 렌더링만으로는 이를 검증할 수 없습니다.

증거 전달

프로젝트의 고정된 툴체인으로 요청된 형식을 렌더링합니다. 위험한 전환 주변의 연속 프레임과 재생이 가능한 경우 일반 속도로 인코딩된 결과를 검사합니다. 텍스트, 실제 콘텐츠, 커서 정렬, 크롭, 에셋 준비 상태, 지속 시간, 종료를 확인합니다. 사운드의 경우 측정된 신호 확인과 실제 청취를 구분합니다.

출력 경로, 실제로 실행된 명령/확인, 자료의 한계, 해결되지 않은 결함을 보고합니다. 실시간 재생 또는 오디오 청취가 불가능했던 경우 명시적으로 언급합니다. 연락처 시트는 시각적 검토를 지원하지만 템포나 오디오 품질을 확립하지는 않습니다. 사용자의 승인 내에서만 작업을 외부에 게시하거나 보냅니다.

관련 스킬