Communitygithub.com

motion-storyboard

코드를 작성하기 전에 종이컷 스크립트를 위한 스토리보드를 작성합니다. 각 장면에 대한 카메라/컷 테이블, 강조된 각 단어의 프레임 수준 이벤트, SFX 계획 및 검증 지점을 생성합니다. "이 스크립트를 스토리보드로 만들어줘" 또는 "카메라 움직임과 컷을 계획해줘"와 같은 명령에 사용됩니다.

motion-storyboard란 무엇인가요?

motion-storyboard는 AI 에이전트(Claude Code, Cursor 등)가 종이컷 애니메이션 스크립트를 시각적 스토리보드로 변환하는 스킬입니다. 각 장면에 대해 카메라 움직임, 컷 전환, 프레임 수준의 단어 이벤트를 명확히 정의하여 후속 작업인 motion-build와 scene 에이전트가 일관된 비디오를 생성하도록 합니다. 주요 기능으로는 카메라/컷 테이블 생성, 각 강조 단어에 대한 프레임 이벤트 할당, SFX 계획 수립, 그리고 검증(proof) 비트와 콜백 장면 포함이 있습니다. 이 스킬은 사용자의 motion 스타일 라이브러리를 참조하여 사전 정의된 카메라 컴포넌트(OrbitCamera, SnapZoom, Crane 등)와 전환 종류(hard, whip, pageTurn 등)를 활용함으로써 일관된 스타일을 유지합니다. 결과물은 STORYBOARD.md 파일에 저장되며, 이후 motion-build가 프로젝트를 스캐폴딩하고 편성 데이터(episode.json)를 생성하는 데 사용됩니다.

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

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

종이컷 스토리보드

스토리보드는 모든 장면이 기반하는 계획입니다. 각 장면에 대한 카메라 움직임과 컷을 명명하여, 장면 에이전트가 임의로 만들지 않도록 합니다. "CameraPush 또는 나만의 변환"을 명시하는 간략한 지침은 모든 장면에 평범한 푸시나 수동 줌을 적용하게 되어, 키트의 카메라 움직임이 사용되지 않게 됩니다.

사전 준비

  • 설치: 최소한의 설치로 충분합니다. 라이브러리를 사용하는 경우 style/$MOTION_STYLE/remotion/CATALOG.md ("paper/camera.tsx" 및 "paper/transitions.tsx" 섹션)에서 각 움직임의 속성과 적합한 상황을 확인하세요. 파일이 없거나 오래된 경우 python3 $MOTION_LIB/core/tools/catalog.py를 실행하세요. $MOTION_LIB는 환경 변수에서 확인하고, 없으면 ~/.config/motion-explainer/config.env의 MOTION_LIB= 줄에서 확인하며, 그래도 없으면 한 번 묻습니다.
  • narration/script.json과 video/STORYBOARD.md(HOOK 블록과 스테이징 테이블(배너, 세트, 소품, UI 순간, 마스코트, 개그가 행별로 있음) 포함)가 필요합니다. 없으면 motion-hook과 motion-script를 실행하세요.
  • 세트 선택을 위한 배경 시트: style/$MOTION_STYLE/remotion/public/bg/backdrops/_sheet.jpg. 필요한 단계에서만 여세요.

1. 전역 규칙

STORYBOARD.md의 상단, HOOK 블록 아래에 배치하세요. 역할별 팔레트(세트별로 배경 색상 순환): $MOTION_LIB/style/$MOTION_STYLE/docs/style-guide.md 섹션 5. 글꼴: 섹션 6. 캔버스 및 영역: 섹션 4. 하나의 확장된 은유에 적합한 기능 잠금 해제는 섹션 12를 사용할 수 있습니다.

  • 1080x1920, 30fps. 배너는 14-21% 높이, 캡션 밴드는 68-80%(얼굴을 피하기 위해 장면마다 이동), 하단 20%는 깨끗하게 유지합니다.
  • 빛은 왼쪽 위에서 들어옵니다. 채도는 캐릭터, 캡션 및 신호에만 적용합니다.

2. 카메라 / 컷 테이블

장면 블록 앞에 장면당 한 행씩 배치합니다. 각 행은 키트의 paper/camera.tsx에서 가져온 컴포넌트와 해당 장면으로의 컷을 위한 CutSeries 종류(paper/transitions.tsx에서)를 명명합니다.

장면카메라 (paper/camera.tsx)컷 인 (CutSeries 종류)
S01HookOrbitCamera + Depth, "<단어>"에 SnapZoom없음
S04NameCrane이 <초점 소품>으로 상승tearAway
S09PeakCrabTrack이 <일렬 배치>를 따라 이동whip
S10CTARackFocus <소품>에서 휴대폰으로tapePull
  • 카메라 옵션: OrbitCamera + Depth, SnapZoom, Crane, CrabTrack, DollyZoom, RackFocus, ForegroundPass, DutchTilt, FocusPulse, FreezeFrame, PullBack, PovMask, TimeRamp, TiltShift, FocusHunt, Handheld 및 CameraPush (paper/kit.tsx에서). 카탈로그의 paper/camera.tsx 섹션에서 각각이 적합한 시기를 설명합니다.
  • 컷 옵션: hard, whip, zoomThrough, pageTurn, tearAway, tapePull, stampCut, infiniteZoom, popUpBook, keyhole, burnAway.
  • 일반 CameraPush는 최대 장면의 1/3까지만 허용됩니다.
  • 각 행의 카메라를 해당 장면 블록 헤더에 복사합니다. 컷 열은 episode.json에 "cuts": {"S04Name": {"kind": "tearAway"}}로 입력됩니다(항목이 없으면 하드 컷을 의미). 이는 motion-build에서 채웁니다.

3. 장면 블록

장면당 하나의 블록, 각각 1.5-5초, 문장 경계에서 컷:

## S03: <비트>  (5.6-8.2 s, 78 f)   BANNER: <대문자로 된 핵심 메시지>
Location/bg: <세계 위치 + 배경 색상>     Camera: <camera.tsx 컴포넌트 + 매개변수, 테이블에서>   Cut in: <종류>
Cast: <등장인물, 액세서리>                       Caption band: y=0.76
| VO 단어 (강조) | 프레임 | 이벤트                                    | 모션 사양                   |
| "<단어>"       | +6    | <소품 등장 / 상태 전환 / 행동>       | <spring/slide/swap + 프레임>  |
Ambient: <LED 깜빡임, 유휴 바운스, 별, 화면 파형>
Boil: 배너 + 레이블, ±1.5 px, 2프레임마다
SFX: <팝, 차임, 클릭...>
  • 각 스테이징 테이블 행을 프레임 수준 이벤트로 확장: 강조된 단어당 하나씩(0.4-0.8초마다), 주변 모션은 항상 켜짐. 프레임은 단어로부터의 오프셋이며, 나중에 cueOf(ID)(word, n)으로 읽습니다.
  • 제품 UI는 종이 모니터나 노트북에 대략 재구성하며, 가짜 상호작용(커서 클릭, 타이핑, 진행률, 파형, 목록 스크롤)을 포함합니다.
  • 검증: 릴당 한 번, 소스 페이지의 실제 스크린샷($MOTION_LIB/core/tools/capture.mjs를 통한 브라우저 캡처, 다시 그리기 아님)을 종이 카드에 붙이고, 빨간 마커 원이 핵심 라인 주위를 그리는 자체 애니메이션을 포함합니다. 다른 모든 것은 거친 종이컷 재구성으로 유지됩니다.
  • CTA 이전에 이전 세트로의 콜백 하나를 포함합니다.

4. 카메라 및 전환 규칙

  • 모든 장면에는 하나의 움직임이 있습니다. 느린 푸시가 기본값입니다. 깊이를 위해 조명이 켜진 세트에 시차 궤도를 추가하고, 숫자나 농담에 대해 강조된 단어에 펀치 인이나 스냅 줌을, 전경 통과(흐릿한 종이 물체가 렌즈를 가로지름)나 랙 포커스를, 규모를 드러내기 위한 풀백을, 그리고 고군분투하는 마스코트 비트에 레이블이 있는 프리즈 프레임을 추가합니다.
  • 대부분 배너 변경 시 하드 컷을 사용합니다. 2-3개의 주제 변경에 모션 블러가 있는 휩팬, 화면, 문 또는 거울 "내부"로 들어갈 때 줌 스루, 릴당 최대 한 번의 페이지 넘김이나 찢기(캐치나 전후 대비에), 그리고 CTA로의 테이프 풀(일반 크라프트 스트립, 단어를 인쇄하는 선택적 label 포함)을 사용합니다.
  • 후크에서 나가는 컷은 움직임을 전달합니다. motion-hook의 규칙을 S01과 S02에 적용합니다.
  • 전환은 6-12프레임 동안 실행되며, 각각 자체 SFX(휩, 줌, 페이지 넘김, 찢기, 테이프 벗겨짐)가 있습니다.
  • 라이브러리 프로젝트에서는 키트의 전환 시리즈로 장면을 연결하여, 각 장면 시작이 plan.json 프레임에 유지되도록 하여 음성 싱크를 유지합니다.

5. SFX 계획

  • 공기 소리(휘파람, 슬라이드, 휩, 줌)는 함께: 릴의 2.5초당 최대 하나. cues.py는 그 이상일 때 메모를 출력합니다. 규모로, 33초에 12개는 괜찮고 26초에 24개는 산만합니다.
  • 등장은 접촉 소리(팝, 쿵, 스탬프) 또는 침묵을 얻습니다. 오디오 렌더링 전에 tools/cues.json에서 계산합니다.
  • 각 블록의 SFX: 줄에 $MOTION_LIB/core/audio/CATALOG.md에서 SFX 이름을 지정합니다. 장면 에이전트는 실제 행을 tools/cue_sheet.d/<Scene>.json에 씁니다.
  • 배경 프리셋(episode.json "bed")을 선택하고 cutSfx를 컷 종류와 일치하도록 설정합니다: tearAway는 찢기, tapePull은 테이프 벗겨짐.

게이트

  • 모든 장면에 카메라와 컷인이 있으며, 일반 CameraPush는 최대 1/3의 장면에만 사용됩니다.

  • 모든 강조된 단어에 이벤트가 있습니다. 주변 모션이 나열됩니다.

  • 하나의 검증 비트, 하나의 콜백, CTA로의 테이프 풀 또는 휩이 있습니다.

  • 최대 한 번의 페이지 넘김이나 찢기. 공기 소리는 예산 내에 있습니다.

  • 각 장면 블록의 이벤트 테이블에서 기대와 하나의 과장된 비트를 명명합니다. 키트 구성 요소에 매핑된 12가지 원칙은 $MOTION_LIB/style/$MOTION_STYLE/docs/motion-principles.md에 있습니다.

인계

다음은 motion-build입니다. 이는 프로젝트를 스캐폴딩하고 카메라/컷 테이블과 장면 경계를 episode.json으로 변환합니다. STORYBOARD.md와 narration/script.json을 읽습니다. STORYBOARD.md의 타이밍 섹션은 음성 이후에 생성되므로, 여기서는 생략합니다.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

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.

관련 스킬

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