Motionite: 에이전트를 위한 모션 디자인
Motionite는 브리프를 완성된 결정론적 Remotion 필름으로 전환합니다. 마치 디자인된 듯 보이고, 생성된 듯하지 않은 결과물을 만듭니다. 세 부분으로 구성됩니다:
| 부분 | 위치 | 용도 |
|---|---|---|
| 15개 NxrStyles | styles/ · 비교 + 선택기 | 필름당 하나의 완전한 시각 시스템 선택 |
| 70개 기법 | techniques/ | 검증된 숫자(ID T, N, X, C, U, H, R)로 각 움직임 구성 |
| 작동 코드 | examples/ | lib/anim.ts 토큰, 데모 컴포지션 및 스타일 컴포지션 복사 |
프롬프트가 차별화 요소는 아닙니다. 동일한 원라이너 쇼릴 프롬프트도 완전히 다른 필름을 만들 수 있습니다. 차이를 만드는 것은 스틸에 대한 반복과 비평 루프의 취향입니다. 이 스킬이 바로 그 루프입니다.
워크플로우 (순서대로 따르세요)
1 · 브리프 → 사실 vs 선택
다음을 정리하세요:
- 사실: 보유한 실제 자산(로고 파일, 스크린샷, 푸티지, 브랜드 헥스, 폰트, VO, 음악 + BPM), 주장, 화면 비율, 지속 시간 및 플랫폼.
- 선택: 그 외 모든 것. 실제 제품의 UI나 로고가 없으면 묻거나 라벨이 붙은 플레이스홀더를 남기세요. 절대 임의로 만들지 마세요.
- 시청자가 기억해야 할 한 문장. 필름은 비트당 하나의 아이디어와 전체적으로 하나의 메시지를 가집니다.
2 · 무드 보드
무드 보드 영상을 2~3개 수집하고 각각에서 무엇을 가져올지 숫자로 기록하세요: 컷 리듬(장면당 초), 팔레트 헥스, 서체, 시그니처 무브. ID는 techniques/README.md에서 찾을 수 있습니다. 가능하다면 각 영상의 연락처 시트를 만들고(ffmpeg -vf fps=2,scale=480:-1,tile=6x5) 읽어보세요.
3 · 하나의 NxrStyle 선택
styles/COMPARISON.md의 결정 테이블을 사용한 후, 해당 스타일의 파일을 열고 시각적 DNA(팔레트, 서체, 레이아웃, 모션, 전환, 타이밍, 오디오)와 Do/Don't를 따르세요.
- 제공된 브랜드 가이드가 스타일의 팔레트와 폰트, 그리고 모든 금지 사항을 재정의합니다.
- 다른 스타일에서 하나의 기법을 빌릴 수 있습니다. 전체 팔레트나 타이포그래피 시스템을 빌리지 마세요.
| # | 스타일 | 느낌 | # | 스타일 | 느낌 | |---|---|---|---|---| | 01 | Beat Reel | 시끄럽고, 바 컷 컬러 필드 | 09 | Live Bento Grid | 라이브 타일의 1:1 루핑 포스터 | | 02 | Night Caption Explainer | 9:16 VO 캡션, 큰 숫자 | 10 | Pixel Bar-Grid Trailer | 픽셀 게임 트레일러, 디더 컷 | | 03 | Floating Product UI | 3D 폰, 거대한 숫자, 칩 | 11 | One-Take Portal Zoom | 세계를 통한 단일 로그 줌 | | 04 | Editorial Ink | 종이, 세리프, 하이라이터 | 12 | Console-as-Film | 객체가 세계 그 자체 | | 05 | One-Pan Flat World | 하나의 카메라 트럭, x로 하늘 | 13 | Clean Launch Film | 절제된, 하나의 강조색 | | 06 | PRESS START Menu | 레트로 8비트 메뉴 | 14 | Paper Stop-Motion | 12초에 컷 종이, 라이소 | | 07 | Frost Collectible | 얼음, 궤도, 민트 카운터 | 15 | Hand-Drawn Ink | 자가 드로잉 보일, 잉크 얼룩 | | 08 | Duotone Storybook | 각인된 네이비 + 하나의 따뜻한 색 | | | |
4 · 프레임 단위 샷 리스트
코딩하기 전에 표를 작성하세요:
| 샷 | 프레임 | 첫 프레임에 화면에 표시되는 것 | 움직이는 것(프레임 정확) | 텍스트 | 기법 ID | 오디오 큐 | |---|---|---|---|---|---|
규칙:
- fps 선택(대부분 30, UI 부드러운 필름은 60), 비트 그리드 설정:
BEAT = fps·60/BPM. 샷은 전체 마디로 지속되며, 컷은 비트 2프레임 전에 떨어집니다. - 프레임 0은 포스터이므로 이미 구성되어 있어야 합니다.
- 샷당 하나의 아이디어, 모든 텍스트 줄에 대해 ≥ 0.8초의 읽을 수 있는 홀드.
- 두 개의 전환 장치를 연속으로 배치하지 마세요. 룩 변경은 하드 컷에서 이루어지며 ≥ 1초 지속됩니다.
5 · Remotion으로 빌드
examples/에서 시작하세요. src/lib/anim.ts(이징 E, 스프링 SPR, prog, spr, lmix, track, hitPulse, blurIn/blurOut, rand, onTwos)와 src/styles/kit.tsx 및 선택한 스타일의 컴포지션을 복사하세요.
빌드 규칙:
render(frame)은 순수해야 합니다:Math.random,Date.now, 타이머, CSS 전환/애니메이션, 프레임 간 상태 없음. 시드된rand(key)만 사용. 모든 물리 효과를 프레임 0부터 고정된 단계로 다시 시뮬레이션하세요.- 진입은
E.out, 종료는E.in으로 합니다. 보조 움직임은 기본 움직임의 55~75%에서 시작합니다. - 로그 공간에서 크기 조정(
lmix). 재타겟팅하는 값은 스프링의 합(track)입니다. - 속도 제한: 스미어 또는 블러 처리되지 않은 경우 ≤ 25 px/프레임 @60.
- 오버슈트는 필름당 최대 2회, 텍스트에는 절대 사용하지 않음. 플래시는 필름당 최대 2회, 65~85%로 제한(절대 빈 전체 프레임 아님).
- 텍스트는 블러 인(12~20 px → 0, 움직임의 60%에서 선명). 일반 불투명도 페이드는 사용하지 마세요.
- 모든 카운터에
fontVariantNumeric: 'tabular-nums'사용. 숫자를 포함하는 폰트 이름은 따옴표로 묶기:'"Press Start 2P"'. preserve-3d요소에 불투명도 또는 필터를 적용하지 말고, 카메라로 크기 조정된 텍스트에will-change를 사용하지 말며, 헤드리스 렌더에서backdrop-filter를 사용하지 마세요.- 레이어 케이던스: UI는 1프레임, 드로잉 캐릭터는 2프레임, 종이 인형은 12프레임. 텍스처는 절대 보일링하지 않음.
- 루프: 마지막 프레임은 첫 번째 프레임과 같음.
6 · 승인을 위한 스틸 (전체 렌더 전)
비트당 하나의 스틸과 모든 전환 주변 3프레임을 렌더링하세요:
npx remotion still src/index.ts <CompId> out/s_<f>.png --frame=<f> --scale=0.5
연락처 시트로 만들고 살펴보세요. 이 단계에서 구도, 가독성 및 팔레트를 수정하세요. 스틸은 몇 초가 걸리지만 렌더는 몇 분이 걸립니다. 사용자 루프가 있다면 스틸에 대한 승인을 받으세요.
7 · 렌더
npx remotion render src/index.ts <CompId> out/raw.mp4 --codec=h264 --crf=18 --pixel-format=yuv420p
ffmpeg -i out/raw.mp4 -c:v copy -af loudnorm=I=-14:TP=-1:LRA=11 -c:a aac -b:a 192k -movflags +faststart out/film.mp4
8 · QA (전체 명령어)
ffprobe: 코덱, 크기, fps, 비디오 지속 시간 = 오디오 지속 시간(±1 f).- 음량: −14 LUFS 통합(±1), ≤ −1 dBTP.
- 최종 MP4에서 연락처 시트 생성(스틸 아님): 2 fps, 6×5 타일.
- 결정론: 프레임을 두 번 렌더링하고 픽셀 차이 확인(동일해야 함).
- 프레임 차이 곡선: 단일 프레임 스파이크가 이웃의 3배를 초과하지 않음.
- 스틸에서 샘플링한 브랜드 헥스, 오디오 온셋이 시각적 히트와 ±1 f 이내.
9 · 자기 비평 (3라운드)
qa.md의 6가지 테스트(포스터, 읽기, 비트, 예산, 스타일, 브랜드)에 대해 연락처 시트를 평가하세요. 최악의 3가지 문제를 수정하고 다시 렌더링하며 최대 3회 반복하세요. 각 라운드에서 변경한 사항을 보고하세요.
보편적 취향 규칙 (간략)
- 프레임 0은 포스터이며, 멈춘 모든 프레임은 구성되어 있습니다.
- 블러 인 텍스트. 일반 페이드 없음. 종료는 가속.
- 하나의 강조색, 그리고 그것은 의미가 있습니다.
- 로그 공간에서 확대/축소, 카메라 움직임은 계단식이 아닌 연속적으로 유지(픽셀 스타일 제외).
- 마디에서 컷, 마디당 하나의 아이디어, 읽을 수 있는 홀드.
- 플래시 제한 65~85%, 최대 2회. 오버슈트 최대 2회, 텍스트에는 절대 사용하지 않음.
- 전환은 디자인된 장치(아이리스, 스미어, 블롯, 스케일 스루, 극성 반전)이며 크로스 디졸브는 사용하지 않음.
- 실제 자산이 그려진 자산보다 우선. 실제 제품의 UI를 절대 가짜로 만들지 마세요.
- 결정론은 기능입니다: 동일한 프레임은 항상 동일한 픽셀을 렌더링합니다.
- 미적 금지 사항(세리프, 크림, 글로우, 유리, 이모지, 파티클)은 일반 제품 필름의 기본값입니다. 브랜드 또는 해당 무드 보드가 이를 재정의할 수 있습니다. 물리 법칙은 선택 사항이 아닙니다.
전체 법칙: techniques/laws.md. 브리프 템플릿: techniques/prompt-skeleton.md.
출력 계약
필름을 전달할 때 다음을 보고하세요:
- 사용된 스타일
- 샷 리스트(프레임 + 기법 ID)
- MP4 및 연락처 시트 경로
- ffprobe 라인, LUFS 판독값 및 결정론 결과
- 각 비평 라운드에서 변경된 사항
- 모든 플레이스홀더 또는 임의로 만든 자산