Alirezaaliniya/reel-motion-edit

릴 모션 그래픽 편집

원시 세로 동영상을 완성된 모션 그래픽 편집물로 변환합니다:

설정 → 분석 → 질문: 스타일 (스타일 보드) + 준비 옵션 → 비트 시트 → plan.json
→ 확인 + 미리보기 루프 → 오버레이 렌더링 → 합성 → 확인 → 제공: 자막 + 추가 기능

오버레이는 투명 배경의 HTML/GSAP으로 프레임별로 렌더링되므로(assets/engine.html), 페르시아어 글자 모양, 글꼴 및 그라디언트가 픽셀 단위로 완벽합니다. 애니메이션 코드를 직접 작성하지 않고, 구성 요소와 시간을 나열하는 plan.json을 작성합니다. 엔진은 선택한 스타일 프리셋에서 이를 애니메이션으로 만드는데, 이 프리셋은 모양, 움직임, 트랜지션 및 사운드 팔레트를 설정하고 각 구성 요소에 기본 음향 효과를 부여합니다.

사용자와 그들의 언어(보통 페르시아어)로 대화하세요. 진행 상황 업데이트는 짧게 유지하세요.

편집이 "완벽하게 어울리는" 느낌이 들고 똑같아 보이지 않아야 하는 이유

시청자는 그래픽이나 사운드가 0.5초라도 어긋나거나 말하는 내용과 전혀 관련이 없을 때 알아차립니다. 그게 편집을 초보적으로 보이게 만드는 것입니다. 초기 편집은 바로 그 점이 비판을 받았습니다: 장식용 배지가 화자의 얼굴 위에 나타나는데, 화자가 말하는 내용과 일치하지 않았던 것입니다. 나중에 사용자는 편집이 반복적으로 보이기 시작했다고도 말했습니다. 네 가지 아이디어가 두 문제를 모두 해결하며, 도구는 대부분을 강제합니다:

1. 단어에 고정하세요. 말을 반향하는 모든 텍스트는 단어 앵커("t": "w:رایگان")를 사용하므로, 음절 근처가 아닌 음절에 맞춰 나타납니다. 수동으로 입력한 초는 순전히 시각적 이벤트에만 사용됩니다.
2. 화면에 고정하세요. 클릭, 페이지 변경 및 레이아웃 확대/축소는 motion.json 이벤트("t": "m:m12")와 사용자가 직접 읽는 타임스탬프가 찍힌 접촉 시트에서 가져옵니다. 보이는 클릭 없이 클릭 SFX는 소음일 뿐입니다.
3. 얼굴을 보호하세요. plan.avoid에 얼굴 및 PIP 사각형을 선언하세요. 그러면 render.js check가 이들을 덮는 모든 요소에 플래그를 지정합니다. 렌더링 전에 모든 COVERS 경고를 수정하세요.
4. 사용자가 모양을 선택하게 하고, 그 안에서 다양성을 주세요. 디자인하기 전에 스타일을 물어보세요(2단계). 그런 다음 매번 동일한 레시피에 의존하지 마세요: 후크 형식, 아이디어를 전달하는 구성 요소 및 트랜지션을 다양화하세요. references/styles.md에는 스타일별 플레이북과 후크 형식 목록이 있습니다.

0단계 — 설정 (기계에서 첫 실행)

python <skill>/scripts/setup.py

faster-whisper, puppeteer-core 및 gsap을 ~/.cache/reel-motion-edit/에 설치하고, SFX 라이브러리를 합성하며, Whisper 모델(large-v3-turbo, 약 1.6GB, 재개 가능하며 huggingface.co가 차단되거나 중단되면 hf-mirror.com으로 폴백)을 다운로드합니다. 이것은 "필요한 것을 다운로드"하는 단계이므로 묻지 않고 수행하세요. 무엇을 다운로드 중인지 한 줄로 사용자에게 알리세요. 백그라운드에서 실행하세요: 느린 연결에서는 모델 다운로드에 시간이 걸릴 수 있습니다. 그동안 analyze.py --no-transcript로 시각적 분석을 수행하고, 나중에 트랜스크립트를 위해 다시 실행할 수 있습니다. 스킬을 업데이트한 후 scripts/sfx.py ~/.cache/reel-motion-edit/sfx를 다시 실행하여 새 스타일 사운드가 존재하도록 하세요.

유용한 추가 에셋(글꼴, 아이콘 세트, 로열티 프리 SFX 또는 음악 트랙)을 발견하면 작업 디렉토리에 다운로드하세요. 라이선스를 <workdir>/CREDITS.txt에 기록하세요. OFL/CC0 소스(Google Fonts, Pixabay/Freesound CC0)를 선호하세요. 번들 글꼴: Vazirmatn(본문), Lalezar(디스플레이), Changa(기술), Lemonada(장난기), Noto Kufi Arabic(격식). 사용자가 로컬에 설치한 글꼴(예: Morabba, IRANSansX, Yekan Bakh)은 plan.fonts를 통해 추가할 수 있으며 종종 가장 브랜드에 맞는 선택입니다. %LOCALAPPDATA%\Microsoft\Windows\Fonts 및 C:\Windows\Fonts에서 찾으세요.

브랜드 키트. ~/.config/reel-motion-edit/brand.json이 존재하면 render.js가 자동으로 적용합니다: style, theme(브랜드 색상), fonts, handle(@사용자이름 워터마크), handleCorner, logo. plan.json이 이를 재정의합니다. "brand": false는 한 동영상에 대해 브랜드 키트를 무시합니다. 사용자가 지속적인 선호도(자신의 핸들, 항상 원하는 스타일, 브랜드 색상)를 알려주면, 그곳에 저장하겠다고 제안하세요.

1단계 — 분석

동영상 옆에 작업 디렉토리를 만드세요(<video dir>/<video name>_edit/) 그리고 실행하세요:

python <skill>/scripts/analyze.py "<video>" "<workdir>" --lang fa

그런 다음 analysis/transcript.txt와 모든 analysis/sheets/sheet_*.jpg(각 10초, 셀당 0.5초, 타임스탬프 포함)를 읽으세요. 스크립트가 출력한 모션 이벤트(m0 … mN, cut/change)는 후보입니다. 각각을 시트와 비교하여 확인하세요. 스크롤도 "change"로 나타나기 때문입니다.

Whisper는 때때로 페르시아어 또는 영어 제품 이름을 잘못 표기합니다. 수정 사항을 기록하세요(자막 및 단어 앵커에 중요: Whisper가 단어를 표기한 방식에 앵커를 설정하세요).

2단계 — 사용자에게 묻기: 스타일 + 준비 옵션 (아무것도 디자인하기 전에)

다른 동영상과 다른 시청자는 다른 모양을 원하며, 사용자는 선택하기를 원합니다. 스타일 보드를 만드세요: 7가지 프리셋 모두로 렌더링된 사용자 동영상의 대표 프레임 하나로, 제목, 단계 칩, 스티커 및 자막 줄이 포함됩니다. 먼저 최소한의 계획(동영상 + 제목 하나 + 키워드 하나 + 동영상에 단계가 있으면 단계)을 작성한 다음 실행하세요:

node <skill>/scripts/render.js "<workdir>/plan.json" styleboard <T>    # → build/styleboard.jpg

T는 프레임이 전형적인(트랜지션이 아닌) 지점을 선택하세요. 이미지를 사용자에게 보내고(SendUserFile, display render), AskUserQuestion으로 물어보세요. 브랜드 키트에 이미 style이 있으면 스타일 질문을 건너뛰세요. 사용자가 다른 것을 요청하지 않는 한 말이죠.

• Q1 — 스타일 (최대 4개 옵션: 이 콘텐츠에 가장 적합한 것을 한 줄 이유와 함께 먼저 추천하고, 대조적인 대안 세 가지를 제시하세요. 나머지는 "기타"를 통해 입력할 수 있다고 말하세요). 프리셋: gradient 모던 그라디언트, bold 팝/Hormozi, neon 기술/사이버, minimal 깔끔한 Apple 스타일, doodle 손그림, retro VHS, news 방송. 설명은 assets/styles.json에 있습니다(label, feel).
• Q2 — 준비 옵션 (다중 선택), 해당되는 것만:
  • 일시 정지 제거 (점프 컷): tighten.py가 약 0.45초보다 긴 무음을 제거합니다. 토크 영상에 가장 적합합니다. 화면 녹화의 경우, 조용한 구간이 클릭이 발생하는 곳일 수 있으므로 경고하세요. 타임라인이 변경되므로 분석 전에 실행됩니다: 조여진 파일에 대해 분석을 다시 실행하세요.
  • 음성 클린업: "voice": "enhance" (잡음 제거, 럼블 컷, 프리젠스, 부드러운 압축). 전화기나 방 오디오에 권장합니다.
  • @핸들 워터마크: 브랜드 키트에 핸들이 없으면 핸들을 물어보세요.
  • 배경 음악: 사용자가 트랙을 가지고 있거나 사용자가 CC0 트랙을 찾기를 원하는 경우에만. 음성 아래에서 자동으로 덕킹됩니다.

사용자가 편집을 원하고 신경 쓰지 않는다면, 사용자를 대신하여 선택하고, 어떤 스타일을 선택했는지와 그 이유를 말한 후 진행하세요.

3단계 — 비트 시트 (디자인하기 전에 생각하기)

<workdir>/beats.md를 작성하세요: 비트당 한 줄, 시간 범위, 말하는 내용, 보여지는 내용, 레이아웃(전체 얼굴 / 화면 + PIP 왼쪽 아래 / 핸드헬드 화면 / …)을 포함합니다. 표시하세요:

• 후크 (처음 1–3초): references/styles.md에서 후크 형식을 선택하세요. 지난번과 다른 형식으로, 가능하다면 알고 있는 경우
• 화자가 설명하는 각 단계 / 아이디어
• 결과 순간 (결과 표시: "연결됨", "완료", 숫자)
• 끝에 있는 CTA
• 레이아웃 변경 (카메라와 화면 간 확대/축소): 트랜지션 지점
• 레이아웃별 안전 영역: 오버레이가 얼굴, 커서 또는 시연 중인 것을 가리지 않고 위치할 수 있는 곳

references/styles.md(선택한 스타일의 플레이북)와 references/creative-direction.md(페이싱, 배치, SFX 규칙)를 읽으세요. 짧고 "어수선함"과 "전문가"의 차이를 만듭니다.

4단계 — plan.json

<workdir>/plan.json을 작성하세요. 모든 구성 요소, 해당 속성 및 기본 SFX는 references/components.md에 있습니다. 계획을 작성하기 전에 읽으세요. 최소 형태:

{
  "video": "D:/videos/vpn firefox.mp4",
  "size": [1080, 1920], "fps": 30,
  "style": "neon",
  "voice": "enhance",
  "handle": {"text": "@your_handle", "corner": "tl"},
  "avoid": [{"name": "face", "from": 0, "to": 14.6, "rect": [200, 420, 680, 900]},
            {"name": "pip",  "from": 15, "to": 29.1, "rect": [0, 1300, 510, 620]}],
  "elements": [
    {"type": "title", "t": 0, "d": 3.8, "y": 90, "kicker": "آموزش ۶۰ ثانیه‌ای", "lines": ["`VPN` *رایگان*"], "sub": "با سرورهای فایرفاکس"},
    {"type": "transition", "t": "m:m3-0.1"},
    {"type": "steps", "items": [{"t": "w:گوگل", "label": "جستجو در گوگل", "sub": "`vpn firefox github`"}], "hide": [[29.0, 34.1]]},
    {"type": "keyword", "t": "w:رایگان", "x": 540, "y": 1640, "text": "رایگان", "emoji": "🎁"},
    {"type": "success", "t": "w:وصل", "x": 405, "y": 678, "title": "وصل شدی!"},
    {"type": "cta", "t": 57.4, "items": [{"text": "سیو کن", "icon": "save"}, {"text": "فالو کن", "icon": "follow"}]}
  ],
  "camera": [{"t": "w:رایگان", "d": 1.2, "type": "punch", "scale": 1.12, "cx": 540, "cy": 700}],
  "sfx": [{"t": 16.2, "name": "typing", "db": -8}],
  "cover": {"lines": ["`VPN` *رایگان*"], "sub": "آموزش ۶۰ ثانیه‌ای"}
}

스타일이 모양을 결정하게 하세요. 시각적 속성(theme 색상, 키워드 style/rotate/from, 트랜지션 kind, 제목 anim, 캡션 스타일)은 의미상의 이유(오류에 대한 빨간색, 브랜드 색상)가 없는 한 설정하지 않은 상태로 두세요. 프리셋이 이를 채워 넣으며, 이것이 스타일을 다르게 느끼게 만드는 것입니다. kind가 없는 트랜지션은 스타일의 트랜지션을 순환합니다. plan.json의 theme는 프리셋을 재정의할 때만 사용합니다(예: 제품의 브랜드 색상).

텍스트 구문: *word* 또는 *two words* = 강조, `latin` = 격리된 LTR 실행(RTL 텍스트 내에서 "VPN"/URL이 뒤집히는 것을 방지).

5단계 — 확인, 미리보기, 수정 (루프)

node <skill>/scripts/render.js "<workdir>/plan.json" check
node <skill>/scripts/render.js "<workdir>/plan.json" preview 1 5.5 15.8 21.1 27.4 54

check는 해결된 타임라인을 출력하고 다음을 린트합니다:

• COVERS: 요소가 보호 영역을 덮음
• OFFFRAME
• CLUTTER: 한 번에 3개 이상의 오버레이
• SFXPILE: 0.35초 이내에 사운드가 쌓임
• ORDER: 단어 앵커가 더 이전의 항목에 적중했으므로 w:word#2를 사용하세요

모든 문제를 수정하세요. 그런 다음 build/preview.jpg를 보세요: 각 중요한 요소에 대해 애니메이션 중간 시간을 선택하고, 콜아웃과 리플이 정확히 대상 위에 있는지 확인하세요. 썸네일에서 추측하는 대신 전체 해상도 프레임(ffmpeg -ss T -i video -frames:v 1 f.png)에서 좌표를 읽으세요. 올바를 때까지 반복하세요. 미리보기는 저렴하지만 전체 렌더링은 그렇지 않습니다.

6단계 — 렌더링 및 합성

node <skill>/scripts/render.js "<workdir>/plan.json" full        # build/overlay.mov (동영상 1분당 약 3–6분)
python <skill>/scripts/compose.py "<workdir>/plan.json" --out "<video dir>/<name> - edit.mp4"
node <skill>/scripts/render.js "<workdir>/plan.json" cover <T>   # build/cover.jpg — 게시물 커버 (흐릿한 프레임 T + 제목)

전체 렌더링을 백그라운드에서 실행하세요. compose.py는 다음을 수행합니다:

• 동영상에만 카메라 움직임을 적용합니다
• 그래픽을 오버레이합니다
• 설정된 경우 voice 클린업을 적용합니다
• 음성 아래에 SFX 베드를 믹싱하고, 설정된 경우 덕킹이 있는 음악을 추가합니다: "music": {"file": "...", "db": -20}
• −14 LUFS로 정규화합니다

소스 동영상을 덮어쓰지 마세요. 새 파일을 작성하고, 재렌더링 시 버전 접미사(- edit v2)를 추가하세요.

7단계 — 확인

출물의 접촉 시트를 만들고(ffmpeg -i out.mp4 -vf "fps=1/2,scale=216:-1,tile=10x3" sheet.jpg) 살펴보세요. 지속 시간이 일치하고 오디오가 있는지 확인하세요. 확인한 내용(프레임)과 확인할 수 없는 내용(들을 수 없음, SFX 타이밍은 이벤트 목록에 대해 확인되며 귀로 확인하는 것이 아님)을 정직하게 보고하세요.

8단계 — 자막 및 추가 기능 제공 (항상, 마지막에)

편집물이 전달되면 AskUserQuestion으로 물어보세요(적합한 경우 다중 선택). 아직 수행되지 않은 것만 제공하세요:

• 자막: references/caption-styles.md의 3–4가지 스타일. 선택한 스타일의 기본값(styles.json의 captions)을 먼저 추천하고 이 동영상을 기반으로 한 이유를 제시하세요.
• 게시물용 커버 이미지(render.js cover).
• 인스타그램 캡션 텍스트: 트랜스크립트에서 <workdir>/post.txt를 작성하세요: 후크 줄, 가치의 2–4개의 짧은 줄, CTA, 화자가 언급한 링크 또는 댓글 키워드, 관련성 높은 페르시아어 + 영어 해시태그 8–15개.
• 브랜드 키트에 저장: 선택한 스타일, 핸들 및 색상을 저장하여 다음 동영상이 그곳에서 시작되도록 합니다.
• 다른 스타일 버전: A/B 테스트를 위해 동일한 plan.json을 다른 style로 다시 렌더링합니다(오버레이만 변경됨).

자막의 경우:

python <skill>/scripts/captions.py "<workdir>" --style karaoke --zones "0-14.6:1400,29.4-33.8:1400" --default-y 1170 --keywords "رایگان,VPN" --fix "غلط=درست,وی پی این=VPN"

출력된 청크를 교정하세요. --fix로 Whisper 철자를 수정하세요. 여러 단어 소스는 토큰을 병합합니다. "captions": {"file": "captions.json"}를 plan.json에 추가하고(스타일 기본값은 프리셋의 것, "style"을 설정하여 재정의), check를 실행하고(자막도 얼굴이나 스티커를 덮지 않아야 함), 그런 다음 새 버전으로 다시 렌더링하고 합성하세요.

주의사항

• 화면 좌표의 요소(클릭, 강조, 콜아웃 화살표)는 카메라 움직임이 같은 부분을 확대/축소하면 정렬이 어긋납니다. 토크 영상 섹션에만 카메라 움직임을 사용하세요.
• 얼굴과 화면 사이의 캠타시아 스타일 애니메이션 확대/축소는 약 0.5초 동안 지속됩니다. 트랜지션 요소를 확대/축소의 시작에 배치하고, 그 창에 텍스트를 화면에 넣지 마세요.
• steps.hide는 전체 얼굴 섹션 동안 단계 칩을 숨기고 이후에 다시 표시합니다.
• Whisper 단어 타임스탬프는 일시 정지 후 첫 번째 단어에서 약 0.1초 늦을 수 있습니다. 하드 히트(타이틀 슬램)의 경우 -0.05로 미세 조정하세요.
• 1080×1920이 아닌 소스(예: 608×1080 전화기 내보내기)는 compose 및 preview에서 계획 크기로 업스케일/크롭됩니다. 계획 좌표는 항상 계획 크기 픽셀 단위이므로, 소스 프레임에서 읽은 좌표에 1080 / source_width를 곱하세요.
• 모니터의 핸드헬드 전화기 영상: 화면이 움직이므로 화면에 고정된 요소(클릭, 강조, 화살표)가 대상에 머물지 않습니다. 대신 구조(단계), 여백의 단어 앵커 스티커 및 전체 프레임 트랜지션을 사용하세요.
• 제목은 기본적으로 어두운 상단 스크림을 얻습니다("scrim": false로 제거). 밝은 화면에서도 읽을 수 있게 유지합니다.
• 화자의 목소리는 그대로 두세요(음량 정규화 이상의 EQ/압축 없음).

권장 워크플로우 예시

1. 사용자가 동영상 파일을 "ادیت کن"(편집해 줘)과 함께 보냅니다.
2. setup.py를 확인하고(아직 실행되지 않은 경우 백그라운드에서 실행), analyze.py를 실행합니다.
3. 스타일 보드를 만들고 사용자에게 보여줍니다. "이 튜토리얼에는 neon 스타일이 적절합니다 — 빠르고 기술적이며 현대적입니다. 또는 bold, minimal 또는 doodle을 시도해 볼 수 있습니다."
4. 사용자가 neon을 선택하고, 핸들이 있으면 워터마크를 요청합니다.
5. beats.md를 작성하고, plan.json을 작성하고, 미리보고 수정합니다.
6. full, compose.py, cover를 렌더링합니다.
7. 확인합니다.
8. 자막(가라오케 스타일 추천), 커버 이미지, 인스타그램 캡션을 제공합니다.
9. "완료! 편집물은 다음과 같습니다: [파일]. 자막이 포함된 다른 버전을 원하시면 말씀해 주세요."

관련 파일

다음 파일에는 이 요약보다 더 자세한 내용이 포함되어 있습니다. 복잡한 편집을 계획하기 전에 읽으세요:

• references/styles.md — 각 스타일의 모양, 느낌, 플레이북, 추천 후크 형식
• references/components.md — 모든 요소 유형, 해당 속성 및 기본 SFX
• references/creative-direction.md — 페이싱, 배치, SFX 규칙, 피해야 할 함정
• references/caption-styles.md — zoned 및 karaoke 스타일의 자막 스타일
• assets/styles.json — 기계가 읽을 수 있는 스타일 정의 (라벨, 느낌, 색상, 기본 자막 스타일)
• assets/engine.html — GSAP으로 구동되는 렌더 엔진 (읽기 전용)

---

이 스킬은 Alirezaaliniya/reel-motion-edit에서 제공합니다.