Communitygithub.com

motion-build

스토리보드에서 페이퍼컷 에피소드를 빌드하고 렌더링하는 라이브러리 기반 도구입니다. 프로젝트 스캐폴딩, 병렬 에이전트로 장면 빌드, 에셋 및 오디오 처리, MP4 렌더링, 재사용 요소 수확을 수행합니다. "릴 제작", "에피소드 스캐폴딩", "장면 4 재빌드", "렌더링" 등에 사용됩니다.

motion-build란 무엇인가요?

motion-build는 페이퍼컷 스타일의 비디오 에피소드를 제작하기 위한 포괄적인 AI 에이전트 기술입니다. Remotion, fframes, kyfram 등 여러 엔진을 지원하며, 스토리보드와 스크립트로부터 에피소드를 자동으로 구성하고 렌더링합니다. 주요 기능으로는 프로젝트 스캐폴딩, 병렬 에이전트를 활용한 장면별 파일 생성, 오디오 cue 시트 작성, MP4 렌더링, 그리고 재사용 가능한 요소 수확이 포함됩니다. 이 기술은 `$MOTION_LIB` 라이브러리 디렉터리에 의존하며, Node.js, Python 도구, Chrome/Chromium이 필요합니다. 빌드 과정은 스캐폴딩 및 엔진 확인, 타이밍 계획, 에셋 준비, 병렬 장면 빌드, 사운드 추가, 최종 렌더링, 수확의 7단계로 구성됩니다. 각 장면은 독립적인 파일로 구성되어 병렬 작업과 Git 차등 관리에 용이하며, 캐싱을 통해 변경된 장면만 재렌더링하여 효율성을 높입니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/boytegar/motion-skills/tree/main/skills/motion-build
원본 보기→모든 스킬 둘러보기

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

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

페이퍼컷 빌드

Remotion 프로젝트를 처음부터 작성하는 대신 라이브러리의 모든 에피소드를 빌드하세요. $MOTION_LIB/core/README.md를 한 번 읽으세요.

사전 점검

  • 설치: Standard 또는 Full. 라이브러리, Node 20+, npm, ffmpeg, Python 도구(numpy, Pillow, soundfile) 및 Chrome 또는 Chromium(오디오 렌더링용)이 필요합니다. motion-explainer의 명령으로 확인하세요. 누락된 것이 있으면 ./install.sh --doctor를 실행하고 motion-setup에 넘기세요.
  • 라이브러리: $MOTION_LIB, 없으면 ~/.config/motion-explainer/config.env의 MOTION_LIB= 줄, 없으면 한 번 물어보세요. 라이브러리가 전혀 없으면 $MOTION_LIB/style/$MOTION_STYLE/remotion/RECIPES.md의 스케치로부터 빌드하세요.
  • Remotion 엔진 전용으로 먼저 Remotion 모범 사례 기술(remotion-best-practices, Remotion 플러그인에서, 또는 npx skills add remotion-dev/skills -g -y -a <your harness id>; install.sh --mode standard가 수행)을 로드하고 마크업, 캡션 및 스튜디오에 대한 라우팅을 따르세요. kyfram의 경우 대신 kyfram 기술을 로드하세요.
  • 이전 단계의 video/STORYBOARD.md와 narration/script.json이 필요합니다.
  • 전체 도구 체인 스모크 테스트: $MOTION_LIB/core/tools/selftest.sh는 examples/hello-reel/을 임시 폴더에 빌드하고 하나의 스틸을 렌더링합니다.

1. 스캐폴드 및 엔진 확인

에피소드 프로젝트는 인테이크/motion-strategy 단계에서 이미 스캐폴드되어 있어야 합니다. video/episode.json에서 기록된 engine을 확인하세요.

  • 아직 스캐폴드되지 않은 경우 사용자에게 물어보고(remotion, fframes 또는 kyfram) 다음을 실행하세요:

    $MOTION_LIB/new_episode.sh <series-dir> NN-slug CompId [out-name] --engine remotion|fframes|kyfram

  • video/의 미리보기 명령:

    • fframes: cargo run --release -- preview (또는 CLI 설치: cargo install --locked cargo-fframes)
    • kyfram: 한 번 렌더링한 후 kyfram view out/cache/kyfram/build/<Scene>.lgv (컴파일된 스크립트: 서문 + 생성된 헤더 + 장면)
    • remotion: npx remotion studio (또는 npm run dev)

  • fframes: 에피소드 프로젝트는 Rust 크레이트입니다(media/, src/main.rs). cargo run --release -- render 또는 $MOTION_LIB/core/tools/render.sh로 렌더링하세요.

  • kyfram: 에피소드 프로젝트는 .lgv 스크립트입니다(scenes/, media/fonts/, src/plan.json). $MOTION_LIB/core/tools/render.sh로 렌더링하세요(장면별로 캐싱하고 연결합니다). 먼저 kyfram 기술을 호출하세요.

  • remotion: React 프로젝트입니다(src/, package.json). npx remotion render <CompId> out/<out>.mp4 또는 render.sh로 렌더링하세요.

2. 계획: episode.json, 음성, 타이밍

스토리보드에서 video/episode.json을 채우세요:

  • scenes: [["S01Hook", "l1_hook", 0], ["S02Name", "l2_name", "called"], ...] (장면 ID, 나레이션 라인 ID, 첫 단어(인덱스 또는 정확한 단어)).
  • banners: {"S01Hook": "대문자로 표시된 TAKEAWAY"}. hook: motion-hook 참조. cuts: 카메라/컷 테이블의 컷 열. bed, whipScene, cutSfx, gaps (라인 후 추가 비트(초 단위)).

그런 다음 motion-voice를 해당 타이밍 단계를 통해 실행하세요(build_vo.py 및 timing_md.py로 끝납니다). 그런 다음 video/에서:

python3 $MOTION_LIB/core/tools/stubs.py        # 엔진 기반 다중 파일 장면 스텁 생성

build_vo.py는 1.2초 미만의 장면에 플래그를 지정합니다. 이웃 장면과 병합하세요. timing_md.py는 STORYBOARD.md의 Timing 섹션(절대 프레임 및 단어 큐)을 작성하므로 에이전트는 plan.json을 열지 않습니다.

3. 에셋

$MOTION_LIB/style/$MOTION_STYLE/docs/asset-prompts.md를 따르세요: 배경 및 복잡한 정적 소품에는 이미지 도구(투명 PNG 출력), 캐릭터, 모든 텍스트, 태그, 게이지, 버튼 및 UI에는 코드를 사용합니다. 생성된 이미지 내에 텍스트가 없어야 합니다. 이미지 도구가 없으면 페이퍼 필터로 코드로 모든 소품을 빌드하세요. 스타일이 유지됩니다. 배경: 라이브러리의 <Backdrop> 세트(style/$MOTION_STYLE/remotion/public/bg/backdrops/_sheet.jpg)를 사용하세요. 라이브러리에 없는 장소가 에피소드에 필요한 경우에만 새 배경을 생성하세요. 증명 스크린샷: node $MOTION_LIB/core/tools/capture.mjs <url> public/proof/x.png, 키트의 RealShot과 함께 표시됩니다.

4. 장면 (엄격한 다중 파일 아키텍처)

절대 모든 장면을 하나의 파일에 넣지 마세요. 각 장면은 병렬 에이전트 작업, 독립적 테스트 및 깔끔한 Git 차이(diff)를 위해 자체 격리된 파일에 있어야 합니다.

video/episode.json에서 engine을 확인하세요:

Remotion (engine: "remotion")

  • 파일 구조:
    • src/scenes/<Scene>.tsx (예: S01Hook.tsx, S02Name.tsx) — 장면당 정확히 하나의 파일.
    • src/scenes/<Scene>.parts.tsx (선택 사항) — 해당 장면의 개인 하위 구성 요소 전용.
    • src/scenes/index.ts — stubs.py에 의해 자동 관리되는 레지스트리 배열 SCENES. 여기에 장면 본문을 절대 인라인으로 작성하지 마세요.
  1. HOOK 블록에서 src/scenes/S01Hook.tsx에 S01Hook을 직접 먼저 빌드하세요. 이것이 에이전트가 일치시키는 참조 장면입니다(큐 상수, 카메라, 고정된 interpolate).
  2. 나머지 장면을 병렬로 장면 에이전트에 넘기고 장면별로 그룹화하세요(각각 2-3개 장면). 브리프는 style/$MOTION_STYLE/remotion/AGENT_BRIEF.md입니다.
  3. 파일 소유권: 에이전트는 src/scenes/<Scene>.tsx, 선택적 <Scene>.parts.tsx 및 tools/cue_sheet.d/<Scene>.json만 작성합니다. 다른 장면이나 index.ts는 절대 편집하지 마세요.
  4. 에이전트는 style/$MOTION_STYLE/remotion/CATALOG.md 및 $MOTION_LIB/core/audio/CATALOG.md를 읽습니다.

fframes (engine: "fframes")

  • 파일 구조:
    • src/scenes/<scene_snake>.rs (예: s01_hook.rs, s02_name.rs) — 장면당 정확히 하나의 파일, 해당 구조체 및 impl Scene for <Scene> 정의.
    • src/scenes/mod.rs — stubs.py를 통해 모든 장면 모듈을 자동으로 등록합니다(pub mod s01_hook; pub use s01_hook::*;).
    • src/main.rs / lib.rs — Video::define_scenes()를 통해서만 장면을 마운트합니다. main.rs 내에 장면 그리기 코드를 절대 작성하지 마세요.
  1. 먼저 s01_hook.rs를 참조 장면으로 빌드하세요.
  2. 나머지 장면을 에이전트에 병렬로 넘기세요(각 에이전트는 src/scenes/<scene_snake>.rs만 소유).
  3. TSX 구성 요소 대신 사용 가능한 카메라, 세트 및 소품 구조체에 대해 style/$MOTION_STYLE/fframes/src/를 읽으세요.

kyfram (engine: "kyfram")

  • 파일 구조:
    • scenes/<Scene>.lgv (예: S01Hook.lgv) — 장면당 정확히 하나의 스크립트, 도형만 포함.
    • 렌더러는 $MOTION_LIB/core/kyfram/lgv/core.lgv, style/$MOTION_STYLE/kyfram/PRELUDE.lgv 및 생성된 헤더(SCENE_ID, BANNER, DUR, FPSR, CAPS 및 scene() 호출)를 앞에 추가하므로 장면은 scene()을 호출하지 않고, 지속 시간이나 캡션 큐를 하드코딩하지 않으며, 도우미를 재선언하지 않습니다.
  1. kyfram 기술을 호출하세요. 먼저 S01Hook.lgv를 참조 장면으로 직접 빌드하고 bash $MOTION_LIB/core/tools/render.sh와 bash $MOTION_LIB/core/tools/qa.sh hook 0-<N> 6 0.3 6으로 확인하세요.
  2. 나머지 장면을 에이전트에 병렬로 넘기고(각 에이전트는 scenes/<Scene>.lgv만 소유), 브리프에 kyfram 기술을 지정하세요.
  3. 에이전트는 토큰과 가구(drawRoom, drawHero, drawBanner, drawCaptions)에 대해 style/$MOTION_STYLE/kyfram/PRELUDE.lgv를 읽고, 정확한 컴파일된 스크립트를 위해 렌더링 후 out/cache/kyfram/build/<Scene>.lgv를 읽습니다.
  4. SFX 및 배경 음악 연결은 아래의 remotion 흐름을 따릅니다. render.sh --voice는 해당 파일이 존재하면 public/vo/voiceover.wav를 mp4로 멀티플렉싱합니다.

빌드 규칙: 1080x1920, 30fps, 키트의 전환 시리즈로 연결된 장면. 글로벌 레이어: VO 및 음악 <Audio>, 테이프 배너 <Boil>, <WordTagCaptions>, <GrainOverlay>. 모든 소품은 <Paper>로 감싸고, 등장은 <PopIn>을 사용하며, 각 장면은 스토리보드 카메라 내에서 실행됩니다. CSS 애니메이션 없음. 하단 20%는 비워두세요. 인접 장면은 배경을 공유하지 않습니다. 기본 히어로는 네모난 주황색 캐릭터(토큰 C.hero #D67354, 쉐이드 C.heroLo #A9553B, 별칭 you)입니다. 액세서리와 이름표가 출연진을 구분합니다.

5. 사운드

$MOTION_LIB/core/audio/sfx/*.js에서 이름으로 SFX를 선택하고 $MOTION_LIB/core/audio/beds/*.json에서 프리셋으로 배경 음악을 선택하세요. kyfram의 경우 먼저 kyfram 기술을 호출하고 tools/cue_sheet.d/<Scene>.json에 장면별 SFX 행을 작성하세요. kyfram은 fframes 및 Remotion과 동일한 공유 사운드 파이프라인을 소유합니다. video/에서:

python3 $MOTION_LIB/core/tools/cues.py && node $MOTION_LIB/core/audio/render.mjs

cues.py는 에이전트의 행을 tools/cues.json으로 병합하고 에어 사운드가 2.5초당 하나를 초과하면 메모를 출력합니다. render.mjs는 public/audio/music.wav 및 fx.wav를 작성합니다.

6. 렌더링

미리보기: cargo run --release -- preview (fframes), npx remotion studio (remotion) 또는 kyfram view out/cache/kyfram/build/<Scene>.lgv (kyfram). 요청 시에만 렌더링하며, 항상 래퍼를 통해 수행하세요. 래퍼는 episode.json에서 엔진을 선택합니다:

$MOTION_LIB/core/tools/render.sh        # -> out/<out>.mp4

플래그: --workers N (기본 3), --conc N, --force, --keep. 각 장면은 캐시되므로 수정 후 변경된 장면만 재렌더링됩니다. 키트, 계획, 음성 또는 캡션이 변경되면 모든 것이 재렌더링됩니다. 첫 번째 실행은 Remotion의 헤드리스 Chrome을 다운로드하며, out/cache는 수 GB의 ProRes를 차지합니다.

하나의 장면을 수정하거나 다시 빌드하려면: src/scenes/<Scene>.tsx를 편집하고 motion-qa로 확인한 다음 render.sh를 다시 실행하세요.

7. 수확 (에피소드 후)

python3 $MOTION_LIB/core/tools/harvest.py .       # video/에서; 읽기 전용 보고서
python3 $MOTION_LIB/core/tools/catalog.py         # 두 카탈로그 모두 재생성

키트 수정, 재사용 가능한 구성 요소, 새로운 SFX 및 반복 비트를 library/HARVEST.md에 설명된 대로 승격시키고 library/CHANGELOG.md에 항목을 추가하세요.

  • 움직임이 뻣뻣하거나 지저분해 보이면 $MOTION_LIB/style/$MOTION_STYLE/docs/motion-principles.md에서 일치하는 원리와 키트 도우미를 확인하세요.

인계

다음은 motion-qa로, 프로젝트의 스틸과 STORYBOARD.md를 읽습니다. 빌드하는 동안 장면별로 실행하고 최종 렌더링 전에 전체 릴에 대해 한 번 실행하세요. 게시 후 motion-strategy가 오토피시를 실행합니다.

Individual skills in this repo

This repo contains 6 individual skills — each has its own dedicated page.

bang-motion

Render a reel in the Bang Motion style: high-end cinematic motion graphics with a multi-layer glowing-horizon background, floating colour-mesh blobs, living film grain, frosted-glass UI cards, editorial kinetic typography, a breathing camera, and anti-PPT pacing. Use when the user says cinematic motion graphic, promo opener, product launch reel, kinetic typography, SaaS product tour, glassmorphic UI, anti-slides, or asks for a video that moves like footage instead of a deck. Gunakan skill ini setiap kali user meminta "video promo", "opener", "intro animasi", "motion graphic", "bumper", "kinetic typography", "animasi teks sinematik", "explainer", "video penjelasan" (jurnalisme visual, kartun edukasi, kolase), atau menunjukkan referensi video promosi/explainer dan ingin dibuatkan versi web-nya — bahkan bila mereka tidak menyebut kata "motion graphic" secara eksplisit. Juga gunakan bila user mengeluh hasil animasi web "seperti PPT/presentasi" dan ingin lebih sinematik, atau ingin meren...

isometric

Render a reel in the Isometric style: calm precise product line art in 2:1 dimetric isometric on a white or dark ground, drawn only with constant 2px hairlines, white-filled faces so nearer objects hide farther lines, rounded slabs with visible thickness, stacked layers, repeated-part grids, and one tiny dark accent per frame. Use when the user says isometric, product line art, technical illustration, exploded hardware view, or asks for a clean documentation-grade diagram look.

motion-explainer

Make a papercut reel, video or explainer end to end. Short vertical (9:16) cut-paper explainers from a link (repo, product page, announcement), idea to mp4. Also routes partial asks to the stage skills and hands out the style prompt for other tools.

motion-script

Turn a link into a papercut reel script. Researches a sourced facts list, writes the 75-95 word script on the 10-beat spine, a banner fact track, a staging table with one set per banner, and the humour pass. Use for "write the script", "research this repo for a reel".

motion-storyboard

Storyboard a papercut script before any code. Writes the Camera / Cut table, one block per scene with frame-level events on each stressed word, the SFX plan and the proof beat. Use for "storyboard this script" or "plan the camera moves and cuts".

papercut

Render a reel in the Papercut style: layered construction paper brought to life with paper grain, torn edges, stacked shade strips, drop shadows, rigid cut-out animation, a slow camera push, taped headline banners and word-by-word torn-tag captions. Use when the user says cut paper, papercraft, paper cutout, paper collage, construction paper, or asks for the default handcrafted explainer look.

관련 스킬

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community