vibe-motion/remotion-code-motion-explainer

Remotion Code Motion Explainer

하나의 연속적이고 편집 가능한 시각적 시스템으로 추상적인 설명을 구성합니다. 각 개념이 어떻게 변화하는지 보여주며, 내러티브를 무관한 모션으로 장식하지 않습니다.

Bingo (@DWCD-Bingo)가 제작하고 Vibe Motion 조직에서 유지 관리합니다.

관련 지침 로드

• 모든 제작 전에 references/code-motion-design.md를 읽으십시오.
• 모든 제작 전에 references/motion-production-patterns.md를 읽으십시오.
• 구현 및 최종 전달 전에 references/production-and-qc.md를 읽으십시오.
• UI, 제품, AI 워크플로우, 네온 포커스, 웨이브폼, 대시보드, 디자인 도구 또는 고충실도 인터페이스 작업 시 references/ui-motion-shot-library.md를 읽으십시오.
• 참조 동영상, After Effects 렌더링, 프로토타입 또는 화면 녹화를 연구하거나 재현할 때 references/reference-reconstruction.md를 읽으십시오.
• 번들로 제공되는 편집 가능한 스타터 라이브러리로 assets/shot-library를 사용하십시오. 새 샷을 디자인하기 전에 assets/shot-library/shot-library.json을 검색하십시오. 재사용 가능한 컴포넌트가 의미 작업과 일치할 때 라이브러리를 대상 프로젝트에 복사하십시오. 설치된 스킬을 직접 편집하지 마십시오.
• 익숙하지 않은 API를 사용하기 전에 설치된 Remotion 문서 또는 모범 사례 스킬을 참조하십시오.

제작 계약 수립

1. 승인된 스크립트 또는 설명, 내레이션 상태, 자막 권한, 종횡비, 프레임 속도, 지속 시간, 브랜드 시스템, 기술적 사실 및 전달 형식을 확정합니다.
2. 내레이션이 있을 경우 사람이 검증한 자막을 타이밍 기준으로 삼습니다. 내레이션이 없으면 명시적인 비트 타임라인을 만들고 음소거 상태에서도 이해 가능하도록 동영상을 설계합니다.
3. 사용자가 제공했거나, 라이선스가 있거나, 공개 도메인이거나, 명확히 재배포 가능한 에셋만 사용합니다.
4. 제품 동작, 수치 데이터, 과학적 관계 또는 상호작용 결과를 절대 임의로 만들지 않습니다.
5. 일회성 하드코딩된 장면보다 매개변수화된 시각적 시스템을 선호합니다.

워크플로우 실행

1. 언어를 시각적 상태로 변환

• 설명을 절 수준의 의미 비트로 분할합니다.
• 각 비트에 대해 다음을 기록합니다:
  • 내레이션 또는 화면 내 진술;
  • 서사적 목적;
  • 입력 상태;
  • 지배적 동사;
  • 가시적 변형;
  • 출력 상태;
  • 시청자 포커스;
  • 다음 비트로의 전달.
• 명사, 동작, 숫자, 관계 및 상태 변화를 독립적인 시각적 주체로 컴파일합니다.
• 여러 비트에 걸쳐 유지되는 지속 객체를 식별합니다.
• 가장 단순한 정확한 표현을 선택합니다: UI, 흐름, 다이어그램, 웨이브폼, 공식, 차트, 공간 모델 또는 3D.
• 계획을 src/data/choreography-plan.json에 작성합니다.

게이트: 모든 진술에는 가시적인 추론 작업, 수행자, 결과 및 전달이 있습니다.

2. 시각적 시스템 고정

• 그리드, 안전 영역, 간격, 타이포그래피, 색상 의미론, 깊이, 카메라 및 모션 곡선을 정의합니다.
• 시각적 세계를 설명하는 하나의 개념-각도 문장을 작성합니다.
• 후크, 가장 복잡한 메커니즘 및 결말에 대한 대표적인 정적 프레임을 설계합니다.
• 진입을 설계하기 전에 최대 정보 히어로 프레임을 구축합니다.
• 지속 객체 레지스트리 및 세계 좌표 계획을 만듭니다.
• 평면적인 스크린샷을 애니메이션화하는 대신 복잡한 객체를 의미 있는 움직이는 부분으로 분해합니다.
• 동일한 개념을 전체적으로 시각적으로 일관되게 유지합니다.

게이트: 정적 프레임이 하나의 시스템으로 읽히고 복잡한 프레임을 편집 가능한 컴포넌트로 조립할 수 있습니다.

3. 결정론적 Remotion 모션 구현

• useCurrentFrame(), interpolate(), spring(), 명시적 프레임 범위를 사용하여 애니메이션을 구동합니다.
• CSS transition, CSS keyframes, 시드 결정론 없는 임의 값, 또는 독립적으로 타이밍이 맞춰진 브라우저 애니메이션을 사용하지 마십시오.
• 유용한 경우 props 및 Zod 스키마를 통해 값을 매개변수화합니다.
• React, SVG, HTML을 선호합니다. 개념에 필요한 경우에만 Canvas, WebGL 또는 Three.js를 사용합니다.
• 텍스트를 측정하고, 범위를 제한하고, 숫자 입력을 검증하고, 프레임 종속적인 부작용을 피합니다.
• 지속 객체를 마운트된 상태로 유지하고 비트 전반에 걸쳐 상태를 변경합니다.
• 각 46초 리뷰 윈도우에서 24개의 호환 가능한 모션 원자를 구성합니다.
• 각 윈도우에 설정, 동작, 가시적 결과 및 전달 단계를 제공합니다.
• 종료가 유지되어야 할 때 모든 시간 종속적인 자식을 동일한 디스플레이 프레임에서 정지시킵니다.

게이트: 렌더링이 결정론적이고, 편집 가능하며, 기술적으로 정확하고, 임의의 프레임에서 안정적입니다.

4. 연속성 및 인과 관계 유지

• 전환 전반에 걸쳐 위치, 객체 식별성, 스케일, 마스크, 방향 및 오디오 모티프를 재사용합니다.
• 다음 요소를 도입하기 전에 하나의 의미 있는 요소를 변형하거나 전달합니다.
• 계층 구조나 관계를 드러내기 위해서만 카메라 이동을 사용합니다.
• 반복적인 전체 화면 페이드-앤-스케일 리셋을 피합니다.
• 챕터 리셋이 의도된 경우가 아니라면 인접한 비트 간에 최소한 하나의 시각적 불변성을 유지합니다.
• 원인과 결과를 읽기 쉽게 만듭니다: 입력이 움직이고, 프로세스가 반응하며, 출력이 보이고, 카메라가 더 큰 시스템을 드러냅니다.

게이트: 음소거된 동영상이 하나의 연속적인 설명으로 이해 가능합니다.

5. 내레이션, 레이블 및 사운드 바인딩

• 정확한 자막 큐에 레이블, 값, 상태 및 상호작용 피드백을 트리거합니다.
• 내레이션이 음악과 효과보다 명확히 우세하도록 유지합니다.
• 가시적 이벤트에 대해서만 절제된 틱, 임팩트, 스윕 및 톤 악센트를 사용합니다.
• 모션 계획과 함께 오디오 이벤트 맵을 생성합니다.
• 하드 컷 대신 의도적인 해결로 음악과 모션을 끝냅니다.

6. 리뷰, 렌더링 및 학습

• 후크, 가장 복잡한 메커니즘, 방정식/데이터 상태, 전환 및 결말을 먼저 렌더링합니다.
• 진입, 중간점, 최대 정보, 전달 및 유지 프레임을 검사합니다.
• 고립된 스크린샷뿐만 아니라 연속적인 모션 윈도우와 그 중첩을 리뷰합니다.
• 전체 타임라인을 포괄하는 연락처 시트를 만듭니다.
• 두 개의 후기 프레임을 픽셀 단위로 비교하여 최종 프레임 유지를 확인합니다.
• 텍스트 잘림, 안전 영역, 색상 대비, 웨이브폼/데이터 정확성, 누락된 에셋, 오디오 피크, 지속 시간, 프레임 속도 및 코덱을 확인합니다.
• 리뷰 증거를 qc/workflow-evidence.json에 저장합니다.
• 수정 사항과 재사용 가능한 컴포넌트를 qc/production-learning.json에 기록합니다.

게이트: 완전한 렌더링이 의미, 연속성, 인과 관계, 구성, 타이밍, 기술 및 라이선스 검사를 통과합니다.

거부

부정확한 상호작용, 조작된 데이터, 임의적인 움직임, 읽을 수 없는 레이블, 평면화된 프로세스 다이어그램, 일반적인 슬라이드 리셋, 내레이션/자막 불일치, 라이선스 없는 에셋, 하드코딩된 개인 경로, 비결정론적 렌더링, 누락된 모션 윈도우 리뷰, 건너뛴 최종 프레임 유지 검사, 또는 재사용 가능한 템플릿으로 제시된 브랜드 참조 복사본을 거부합니다.

전달

최종 동영상, 편집 가능한 Remotion 프로젝트, 타임라인, 컴포넌트 매개변수, 승인된 입력 에셋, 사용된 경우 오디오 스템, 연락처 시트, QC 증거 및 재사용 가능한 컴포넌트의 짧은 목록을 반환합니다.

번들 예제

• assets/showcase/code-motion-promo-30s.mp4: 30초 기능 트레일러.
• assets/showcase/ac-to-dc-explainer.mp4: 과학 설명자 예제.
• assets/shot-library: 편집 가능한 Remotion 샷 라이브러리 및 검색 가능한 카탈로그.