Morph Edit (모션 B-롤)
당신(에이전트)은 창작자의 영상을 위한 모션 그래픽 클립을 만듭니다. 모든 클립은 컷 없이 하나의 모양입니다. 즉, 크기, 모서리, 색상이 상태에서 상태로 모핑되고, 내용물은 짧은 블러 효과와 함께 교체됩니다. 커서는 실제 클릭과 드래그로 변경을 구동하며, 모든 변경은 말하는 단어에 정확히 맞춰집니다.
출력물은 창작자가 편집기에 드롭하는 클립 세트입니다. 또한 클립이 삽입된 영상의 미리보기 렌더본과, 클립을 하나씩 살펴볼 수 있는 HTML 페이지, 그리고 전후를 비교할 수 있는 HTML 페이지 두 개를 제공합니다.
필요한 모든 것은 이 스킬 폴더 안에 있습니다:
engine/: 모션 엔진(motion.js), 페이지 셸(base.css),build.py(클립 → 독립 실행형 HTML),render.js(모션 블러가 적용된 프레임별 렌더링),beats.js(스틸 이미지 연속 시트), 폰트(Geist, OFL).scripts/:setup.sh,inspect_video.py,words.py,composite.py,make_pages.py.reference/engine-api.md: 클립 작성 방법. 첫 클립을 작성하기 전에 반드시 읽으십시오.examples/opus-aoe2/: 실제 54초 영상을 위한 완성된 6개의 클립. 품질 기준과 시작점으로 사용하십시오.
아래에서 $SKILL은 이 스킬의 폴더를 의미합니다. 사용자 프로젝트에 motion/ 폴더를 만들고 작업하십시오.
1. 설정 (최초 1회만 실행)
bash $SKILL/scripts/setup.sh ./motion
이 명령은 Node, Python 3, ffmpeg가 설치되어 있는지 확인하고, Playwright + Chromium을 motion/node_modules에 설치합니다. 모든 엔진 스크립트는 NODE_PATH=./motion/node_modules를 붙여 실행하십시오.
2. 인터뷰
AskUserQuestion 도구를 사용하십시오; 한 라운드로 끝내야 합니다. 다음 정보가 필요합니다:
- 영상 파일 경로.
motion/work/source.*로 복사하거나 참조하십시오. - 대본(트랜스크립트). 선택 사항입니다. 대본이 없거나(또는 일반 텍스트만 있는 경우),
scripts/transcribe.py를 사용하여 오디오를 텍스트로 변환하십시오(3단계 참조). 이렇게 하면 SRT 추정치보다 더 정확한 실제 단어 타임스탬프를 얻을 수 있습니다. - 밀도:
- 약함: 분당 2~4개 클립, 가장 강력한 순간에만.
- 보통(기본값): 분당 4~7개.
- 강함: 대부분의 대사에 적용, 얼굴이 나오는 짧은 틈만 허용.
- 룩(Look):
- 기본 팔레트: 따뜻한 회색 캔버스, 검은색과 흰색 구성 요소, 오렌지색 악센트 1개.
- 또는 사용자의 브랜드 색상과 폰트. 사용자에게 로고, 스크린샷 또는 브랜드 색상을
motion/inputs/에 드롭하도록 요청하고, 그것들을 읽어들이십시오.
- 피해야 할 것 또는 포함해야 할 것. 얼굴을 그대로 두어야 할 대사, 표시해야 할 실제 숫자나 이름, 재현해야 할 제품 스크린샷.
사용자가 이미 답변한 질문은 건너뛰십시오.
3. 영상 조사
python3 $SKILL/scripts/inspect_video.py motion/work/source.mp4 motion/work
python3 $SKILL/scripts/words.py transcript.srt > motion/work/words.txt
# 대본이 없거나(정확한 단어 타이밍을 원하는 경우): 대신 오디오를 텍스트로 변환
motion/.venv/bin/python $SKILL/scripts/transcribe.py motion/work/source.mp4 motion/work
transcribe.py는 words.txt와 transcript.srt를 씁니다. 계획을 세우기 전에 사용자에게 대본을 보여주어 잘못 들은 이름이나 용어를 수정할 수 있도록 하십시오.
자신이 motion/work/contact.png를 직접 확인하십시오. video.json은 해상도, fps 및 레이아웃 섹션을 제공합니다:
- full: 화면 전체에 스피커가 채워집니다.
- pip: 스피커가 박스 안에 있고 나머지는 비어 있습니다. 박스 위치와 박스 크기나 위치가 변경될 경우 경고를 포함합니다.
클립은 영상의 해상도와 fps와 일치해야 합니다. SRT의 단어 시간은 추정치(±0.2초)이므로 그렇게 취급하십시오.
4. 계획 수립 및 코드 실행 전 승인
클립당 한 행씩 테이블을 보여주십시오:
| # | 시작-끝 | 해당 대사 | 모양이 어떤 단어에 무엇을 하는지 | 처리 방식 | 이유 |
크리에이티브 방향: 각 클립이 프레임의 얼마만큼을 차지할지 결정하십시오. 이것이 가장 중요한 결정입니다. 클립별로 결정하고 이유를 제시하십시오.
- 전체 프레임 컷어웨이. 프레임이 모두 스피커이고, 대사가 볼 무언가(제품, 프로세스, 비교, 숫자, 챕터 변경)를 설명할 때 사용합니다.
- 아이디어 길이(3~10초) 동안 컷어웨이한 후, 다시 얼굴을 비춥니다.
- 후크(도입부)의 첫 1초 또는 개인적, 감정적, 의견 대사에서는 컷어웨이하지 마십시오.
- 컷어웨이 사이에 최소 약 2초의 얼굴 시간을 남겨두십시오.
- 빈 공간의 패널. 이미 편집에 여백이 있는 경우: PiP 박스, 분할 화면, 빈 영역.
- 빈 영역 중앙에 투명 클립(
bg:null)을 렌더링하고, 항상 스피커 박스와 겹치지 않도록 크기를 조정하십시오. - 스피커가 계속 화면에 있으므로 하나의 연속적인 모핑으로 길게(15초 이상) 실행할 수 있습니다.
inspect_video.py가 박스 변경을 보고하면, 의도된 것인지 물어본 후, 가장 큰 박스에 맞게 크기를 조정하거나 변경 지점에서 패널을 분할하십시오.
- 빈 영역 중앙에 투명 클립(
- 아무것도 하지 않음. 대사가 스피커 자체에 관한 것이거나, 다른 클립과 너무 가까운 경우.
콘텐츠 규칙:
- 주제의 실제 객체를 보여주십시오: 폴더, 터미널, 파일, 제품, 결과물. 단어에서 가져오십시오. 각 아이디어를
reference/engine-api.md의 용어집에 있는 상호작용(알약 + 클릭, 진행률, 체크, 상태 아일랜드, 드래그 기능이 있는 카드, 슬라이더, 토글, 탭, 차트 + 툴팁, 검색/필터, 파일 드래그 앤 드롭, 터미널 타이핑, 나란히 비교, 챕터 카드) 중 하나에 매핑하십시오. - 숫자, 인용문, 가격 또는 결과를 절대 만들어내지 마십시오. 상대적인 막대, 스켈레톤 텍스트 줄 또는 대본에서 가져온 레이블을 사용하고, 무엇이 예시용인지 명시하십시오. 실제 수치는 사용자가 제공할 때만 넣으십시오.
- 클립당 하나의 아이디어. 연속적인 구간(전체 PiP 섹션)은 여러 상태를 가진 하나의 긴 클립이 될 수 있습니다.
- 음악이 아닌 말의 속도에 맞추십시오: 말하는 박자당 하나의 변경, 약 0.4~1.2초 간격.
사용자가 계획을 승인하거나 수정할 때까지 기다리십시오.
5. 빌드
reference/engine-api.md와 예제를 따라 motion/clips/NN-name.html에 각 클립별로 하나의 프래그먼트를 작성하십시오. 그런 다음 빌드합니다:
python3 $SKILL/engine/build.py motion/dist motion/clips/*.html
각 상태 변경을 해당 단어에 맞추십시오: 클립 내 시간 = 단어 시간 − 클립 시작점.
6. 키워드에서 스틸 이미지 확인
NODE_PATH=./motion/node_modules node $SKILL/engine/beats.js motion/dist/NN-name.html motion/work/NN.png 0.4 1.2 2.1 …
각 상태가 안정된 시간과 중간 모핑 순간 몇 개를 선택하십시오. 모든 시트를 직접 확인하십시오. 비좁거나, 잘리거나, 읽을 수 없거나, 단어에 맞지 않거나, 커서가 프레임을 벗어난 부분을 수정하십시오. 그런 다음 다시 한 번 확인하십시오. 패널 클립은 시트에서 검은색 배경으로 렌더링되므로 평가할 수 있습니다.
7. 렌더링
NODE_PATH=./motion/node_modules node $SKILL/engine/render.js motion/dist/NN-name.html motion/out/NN-name_0m32s40.mp4 30000/1001
- 영상의 fps를 사용하십시오.
- 패널 클립(
bg:null)은 알파 채널이 포함된 ProRes 4444를 제공하는.mov로 작성되어야 합니다. - 각 파일의 이름은 타임라인 시작점(
0m32s40= 0:32.40)으로 지정하십시오. - 렌더링은 프레임당 4개의 서브프레임을 사용하므로 실시간보다 느립니다. 멀티코어 머신에서는 두 개의 클립을 병렬로 실행하십시오.
8. 전달
motion/plan.json(스키마는 reference/engine-api.md 참조)을 작성하십시오. UI 음향 효과를 위해 각 클립에 해당 큐에서 가져온 "sfx": [[클립 내 시간, 종류], …] 목록을 제공하십시오: click과 toggle은 커서 클릭 시, pickup/drop은 드래그 시작/해제 시, whoosh는 모양 모핑 시, pop은 인트로와 배지 시, rise/fall은 바(bar) 시, type은 타이핑 시, tick은 항목 등장 시, shutter는 스크린샷 시, success는 체크 시. 그런 다음:
python3 $SKILL/scripts/composite.py motion/plan.json motion/out/preview.mp4
python3 $SKILL/scripts/sfx.py motion/plan.json motion/out/preview.mp4 # 사용자가 원하는 경우 UI 음향 효과
python3 $SKILL/scripts/make_pages.py motion/plan.json motion/out/preview.mp4
python3 $SKILL/scripts/make_gallery.py motion/plan.json motion/out/preview.mp4
사용자는 모두 motion/out/에서 다음 파일을 받습니다:
- 클립들
TIMING.md: 파일, 시작점, 끝점, 해당 대사, 처리 방식, 예시용 항목preview.mp4: 클립이 삽입된 영상, 하드 컷, 원본 오디오(SFX 사용 시 포함)sfx/: 각 클립의 음향 효과를 별도의 WAV 파일로, 편집기에서 믹싱할 수 있음index.html: 모든 클립을 그리드에서 동시에 재생, 전체 미리보기 및 다른 페이지 링크 포함(가장 먼저 열 것)viewer.html: 클립을 단계별로 넘겨보기compare.html: 원본과 미리보기를 나란히, 세로로, 또는 와이프로 동기화하여 비교
미리보기는 검토용임을 명확히 말씀드리십시오: 최종 컷을 위해 사용자는 클립을 자신의 편집기에서 배치하여 타이밍을 조정하고, 전환을 추가하고, 오디오를 믹싱할 수 있습니다.
구독 카드 (선택 사항)
창작자에게 콜투액션 대사에 맞춰 종료 구독 카드와 짧은 리마인더 1~2개를 원하는지 물어보십시오. 템플릿은 $SKILL/templates/subscribe/ 안의 클립 프래그먼트입니다(end-card.html, reminder.html). 하나를 motion/clips/로 복사한 후:
__CHANNEL__,__HANDLE__및__AVATAR__(데이터 URI 형식의 창작자 로고 또는 사진; 이미지가 없으면 원 안에 글자 사용)를 교체하십시오. 이러한 정보를 요청하고; 이름이나 핸들을 절대 추측하지 마십시오.<script>상단의 상수(IN, 클릭 시간,T)를 창작자의 실제 단어에 맞게 다시 시간 조정하십시오. 종료 카드는 창작자가 말하는 단어에 맞춰 공유, 구독, 알림, 좋아요, 댓글을 클릭하고; 리마인더는 구독과 알림을 클릭합니다.- 다른 클립과 마찬가지로 빌드, 스틸 확인, 렌더링한 후
plan.json에 추가하십시오. 카드를 투명한.mov패널로 렌더링하여 영상 위에 오버레이되도록 하십시오.
자막 (선택 사항)
구어체 언어의 SRT와 영어 SRT를 만들어 자막(비디오에 인코딩되지 않은)으로 업로드할 수 있도록 하십시오. motion/work/cap/에서 작업하십시오:
motion/.venv/bin/python $SKILL/scripts/captions/find_gaps.py motion/work/words.txt "<video>": Whisper는 긴 영상에서 연속된 음성 구간을 놓칠 수 있습니다. 이 명령은 그 틈을 출력합니다.retx.py "<video>" "<gaps list>" motion/work/gapwords.json [language]로 다시 변환하십시오.python3 $SKILL/scripts/captions/make_cues.py motion/work/words.txt motion/work/gapwords.json motion/work/cap는 큐와 네 개의 청크를 작성합니다.templates/caption_brief.md를 사용하여 네 개의 청크를 병렬로(청크당 하나씩, 총 네 개의 하위 에이전트) 번역하십시오. 각각은 모든 큐에 대해{"i","orig","en"}을 포함하는out1..4.json을 작성합니다.- 플래그가 지정된 큐를 수정한 후,
python3 $SKILL/scripts/captions/build_srt.py motion/work/cap motion/out/captions는captions_original.srt와captions_english.srt(각각 최대 42자로 균형 잡힌 두 줄)를 작성합니다. - 창작자에게 게시 전에 VLC 또는 비공개 업로드에서 SRT를 테스트하도록 알리십시오.
스타일 기본값
사용자의 브랜드가 이 기본값을 재정의합니다.
- 색상: 캔버스
#E9E7E2, 잉크#0B0B0B, 흰색 구성 요소, 악센트 1개#FF5A1F. 어두운 영상 위의 패널 클립은 밝은 모양(#F4F2EE)을 사용합니다. - 글꼴 및 아이콘: UI 텍스트는 Geist, 코드, 파일 이름 및 터미널은 Geist Mono. 하나의 아이콘 세트와 하나의 선 굵기(
M.icon). - 모션: 최대한 작은 오버슈트를 가진 스프링. 앞쪽과 뒤쪽 가장자리는 서로 다른 스프링을 타므로 표시기가 늘어납니다. 카메라는 각 상태가 프레임을 채우도록 줌합니다.
- 금지 사항: 바운시 이징, 파티클, 글로우, UI 크롬의 그라데이션, 혼합된 아이콘 선 굵기, 데드 타임, 템플릿처럼 보이는 것, 조작된 데이터.
주의사항
- 카메라가 스케일하는 요소에는
will-change를 절대 사용하지 마십시오. 텍스트가 흐릿하게 렌더링됩니다. - 모핑 컨테이너 내부의 텍스트 교체는 고유한 진입 및 종료 타이밍(
M.vis din/lin/lout)이 필요합니다. 그렇지 않으면 이전 텍스트와 새 텍스트가 겹칩니다. mix-blend-mode: difference레이블은 블렌드 모드 자체가 있는 레이어에 배치되어야 합니다. 필터가 적용된 부모가 이를 분리합니다.- 하이라이트 아래로 미끄러져 들어가는 항목은
M.FAST스프링이 필요합니다. 그렇지 않으면 하이라이트 행이 잠시 비어 있습니다. - 커서는 모핑 중을 포함하여 모든 카메라 줌에서 프레임 내부에 유지하십시오.
- SRT의 단어 추정치는 큐 내에서 오차가 있습니다. 가능한 경우 중요한 변경 사항을 큐의 첫 번째 또는 마지막 단어에 배치하십시오.
- 클립은 마지막 상태를 유지하며 종료됩니다. 구성 파일은 슬롯이 더 길면 마지막 프레임을 유지합니다.