시네마틱 카메라

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, [/* 초점 x */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const fy = interpolate(frame, KEY_T, [/* 초점 y */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const z = interpolate(frame, KEY_T, [/* 줌 */], {
  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() 입력 범위는 반드시 엄격하게 증가해야 합니다.
세계를 적당히 유지하세요. 크게 흐리게/그림자 처리된 레이어는 비용이 많이 들고 일반적으로 시각적 규칙을 위반합니다.
틱 데이터에는 표 숫자를 사용하세요.

Amartileyton/autovideo

autovideo란 무엇인가요?

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

문서