시네마틱 카메라은(는) 무엇을 하나요?

remotion-best-practices 및 motion-graphics와 함께 사용하세요. 분리된 패널을 빈 공간에 배치하는 대신 하나의 연결된 세계를 구축하고 공유 카메라를 이동하세요.

필수 인테이크

계획 또는 코딩 전에 motion-graphics 인테이크 게이트를 따르세요. 누락된 경우 다음을 질문하세요:

원하는 형식은 무엇인가요: 4:3 반쪽 화면 Instagram 삽입 또는 9:16 전체 화면 Instagram? 그리고 어떤 배경을 원하시나요: 따뜻한 조명, 깨끗한 어두운 배경, 밝은 그리드, 또는 어두운 그리드?

9:16이나 어두운 배경으로 조용히 기본 설정하지 마세요. 사용자가 선택을 위임하면 따뜻한 조명을 사용하세요.

절대적인 시각적 금지

이 스킬은 네온, 글로우, 블룸, 발광 가장자리, 유색 그림자, 그라데이션 오브, 방사형 컬러 워시, 시안-보라 그라데이션, 글래스모피즘 또는 사이버펑크 조명을 절대 도입하지 않습니다. 카메라 이동이 절제된 장면을 바이브 코딩된 AI 데모로 바꾸어서는 안 됩니다. 제품 악센트는 평평하고 절제된 상태를 유지합니다.

필수 승인된 참조 게이트

계획 또는 코딩 전에 완료하세요:

동일한 프로젝트, 제품, 종횡비, 배치 또는 시각적 메커니즘과 관련된 최신 승인된 렌더링 3~5개를 검사하세요.
소스 컴포지션을 열고 카메라 키프레임, 타이밍, 간격, 타이포그래피, 색상, 밀도, 등장, 퇴장, 종료 유지를 검사하세요.
실제 클립 또는 대표 프레임을 검사하세요. 파일 이름만으로는 충분하지 않습니다.
실제 자산(로고, 마스코트, 스크린샷, 녹화물, 푸티지, 이전 출력물)을 목록화하세요.
클립이 승인된 시스템을 어떻게 이어가는지 설명하는 짧은 비트 맵을 작성하세요.
프로젝트 참조가 없으면 고정된 폴백을 사용하세요: 따뜻한 오프화이트 물리적/편집적 세계, 진한 잉크, 음소거된 중성색, 하나의 절제된 평평한 브랜드 악센트, 중성 그림자, 장식 효과 없음.

참조 우선순위: 동일한 비디오 → 동일한 제품/시리즈 → 동일한 종횡비/사용 사례 → 기타 승인된 저장소 예제 → 고정된 폴백.

공식 갤러리: https://github.com/Liamrjohnston/remotion-motion-graphics-skill

최근 승인된 작업이 기준선이며, 선택적인 영감이 아닙니다. 새로움을 위해 새로운 미학을 발명하지 마세요.

핵심 아이디어

뷰포트보다 큰 하나의 세계를 구축하세요. 이미 움직이는 동작을 좁게 열고, 동작이 완료될 때까지 유지하고, 컨텍스트를 드러내고, 대비/결과로 이동한 다음, 안정화하세요.

패널이 존재할 수 있지만, 하나의 세계와 의미 있는 공간 관계를 공유해야 합니다. 빈 공간에 독립적으로 나타나는 분리된 카드를 피하세요.

카메라 장비

초점점과 줌에 대해 하나의 공유 키프레임 타임라인을 사용하세요:

const ease = Easing.inOut(Easing.cubic);
const KEY_T = [0, 46, 62, 78, 96, 132, 174, TOTAL_FRAMES];

const fx = interpolate(frame, KEY_T, [/* focal x */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const fy = interpolate(frame, KEY_T, [/* focal y */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const z = interpolate(frame, KEY_T, [/* zoom */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

<AbsoluteFill style={{backgroundColor: BG}}>
  <div
    style={{
      position: 'absolute',
      transform: `translate(${VIEW_W / 2 - fx}px, ${VIEW_H / 2 - fy}px) scale(${z})`,
      transformOrigin: `${fx}px ${fy}px`,
    }}
  >
    {/* 세계 좌표의 전체 장면 */}
  </div>
</AbsoluteFill>

치수는 확인된 형식에서 가져오며, 숨겨진 기본값을 사용하지 않습니다.
세계 너비는 일반적으로 뷰포트 너비의 2~2.5배입니다.
반복되는 인접한 키는 유지를 만듭니다.
카메라 이동은 일반적으로 14~24프레임이 소요됩니다.
안정적인 편집기 유지를 위해 거의 동일한 두 개의 키로 끝냅니다.
카메라, 커서, 효과 및 연결된 객체는 하나의 좌표계에 유지됩니다.

안무

이미 움직이는 것에 좁게 열기.
기본 동작이 완료될 때까지 유지.
더 큰 시스템 공개.
대비/결과로 이동.
지원 객체가 순차적으로 완료되는 동안 확대.
깨끗한 컷을 위해 안정화.

규칙:

카메라는 다음 동작으로 이동합니다. 동작은 유지 중에 완료됩니다.
비트당 하나의 기본 동작.
상태 표시에만 미세 움직임 사용: 입력, 틱, 확인, 재생, 진행, 커서 이동.
장면 교체보다 지속적인 변환 선호.
격렬한 휩보다 부드러운 이동 선호.
움직임은 인과 관계를 설명합니다. 약한 개념을 보상하지 않습니다.

진정성과 텍스트

가능한 경우 실제 로고, 푸티지, 스크린샷, 녹화물, UI 및 검증된 데이터를 사용하세요.
일반적인 컬러 사각형, 가짜 표시, 발명된 UI 또는 가짜 지표로 대체하지 마세요.
제품명, 파일명, 카운터, 명령, 진행 및 실제 UI 텍스트는 허용됩니다.
프레임이 비어 있다고 느껴지더라도 내레이션 문장을 반복하거나 설명 배지를 추가하지 마세요.

1차 거부 게이트

모든 답변이 "아니요"가 될 때까지 렌더링을 보여주지 마세요:

형식 또는 배경이 확인되지 않았습니까?
네온, 글로우, 컬러 조명, 그라데이션 워시, 유리 패널 또는 바이브 코딩된 AI 처리가 있습니까?
장면이 빈 공간의 분리된 일반 카드 집합입니까?
사용자가 선택하지 않았거나 승인된 참조에서 요구하지 않은 어두운 배경을 사용했습니까?
카메라 이동이 인과 관계를 안내하는 대신 장식합니까?
실제 자산을 사용할 수 있음에도 누락되었습니까?
선택한 Instagram 배치에서 필수 요소를 읽을 수 없습니까?
결과가 승인된 참조의 간격, 밀도, 재료 및 움직임 리듬과 일치하지 않습니까?

게이트가 통과될 때까지 비공개로 수정하세요.

QA 및 전달

오프닝, 각 카메라 도착지, 전환, 결과 및 종료 유지에 대한 스틸을 렌더링하세요.
승인된 참조와 프레이밍, 밀도, 정체성, 재료 절제 및 폴리시를 비교하세요.
실제 자산이 읽을 수 있는지 확인하세요.
유지 → 이동 → 유지 및 이동 중에 동작이 숨겨지지 않는지 확인하세요.
전체 MP4에서 빈 이동, 크롭, 죽은 프레임, 일반 필러, 네온/글로우 및 약한 종료 유지를 검사하세요.
동일한 승인된 시각적 시스템처럼 보일 때만 전달하세요.

기술적 제약

useCurrentFrame(), spring() 및 interpolate()로 동작을 구동합니다. CSS 애니메이션은 사용하지 마세요.
interpolate() 입력 범위는 엄격하게 증가해야 합니다.
세계를 적당히 유지하세요. 큰 흐리게/그림자 레이어는 비용이 많이 들고 일반적으로 시각적 규칙을 위반합니다.
틱 데이터에는 표 형식 숫자를 사용하세요.

시네마틱 카메라