Communitygithub.com

ErtanLabs Motion

모션 그래픽을 결정론적 HTML-비디오 파이프라인으로 직접 설계, 렌더링 및 검증합니다. 각 작품은 실제 '소스 세계' 아티팩트에서 시각적 문법을 차용하고, 모든 선택을 결정 원장에 기록하며, 프레임 번호가 매겨진 비트 시트로 타이밍을 계획하고, 번들된 병렬 렌더러를 통해 프레임 단위 MP4, ProRes(알파 포함) 또는 WebM을 렌더링하며, 번들된 체커로 홀드, 음량, 플래시, 색상 태그 및 플랫폼 안전 영역을 측정합니다.

ErtanLabs Motion란 무엇인가요?

ErtanLabs Motion은 모션 그래픽 제작을 위한 포괄적인 AI 어시스턴트 스킬로, Claude Code, Cursor, Codex 등 다양한 AI 에이전트 플랫폼에서 사용할 수 있습니다. 이 스킬은 결정론적 HTML-비디오 파이프라인을 구축하여 모든 시각적 선택의 출처를 추적 가능하게 만들고, 프레임 단위로 정확한 비디오를 렌더링합니다. 주요 기능으로는 소스 세계에서 시각적 문법을 차용하는 '결정 단계', 프레임 기반 비트 시트와 가중치 클래스를 사용하는 '제작 단계', 그리고 자동 체커를 통한 '검증 단계'가 있습니다. 이 스킬은 키네틱 타이포그래피, 설명 영상, 시네마틱 쇼릴, 타이틀 시퀀스, 애니메이션 차트, 제품 프로모션, 소셜 미디어 세로형 콘텐츠 등 다양한 모션 그래픽 작업에 적합하며, Sprint, Studio, Series, Revision, Narrated explainer 등 다섯 가지 작업 모드를 지원합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ErtanLabs/ertanlabs-motion/tree/HEAD/skills/ertanlabs-motion

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

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

문서

ErtanLabs Motion은(는) 무엇을 하나요?

모션 작업은 예측 가능한 방식으로 평범해집니다. 브리프가 열어둔 모든 선택지는 가장 흔한 것으로 채워지고, 가장 흔한 선택으로 조립된 비디오는 수천 개의 다른 비디오와 구분할 수 없게 됩니다. 이 스킬은 열린 선택지를 명시적으로 만들고, 각각에 추적 가능한 출처를 부여하며, 결정론적으로 렌더링하고, 아무도 보기 전에 파일을 측정합니다.

하우스 규칙: 모든 보이는 선택에는 소유자가 있습니다. 글꼴, 색상, 곡선 또는 사운드가 어디서 왔는지 가리킬 수 없다면 아무도 선택하지 않은 것입니다.

경로

단계단계남기는 것
A · 결정A1 머신 프로브--doctor 결과, 선택된 백엔드
A2 브리프 분석로그라인, 캔버스, 인벤토리, 사운드트랙, 가드레일, 태그된 가정
A3 소스 세계 찾기작품이 문법을 차용하는 아티팩트, 스토리 장치, 히어로 비트
A4 기본값 작성 후 뒤집기가장 흔한 버전과 그 대체품
A5 원장 유지컴포지션 옆에 ledger.md
B · 제작B1 프레임 단위 계획계획된 홀드가 포함된 비트 시트
B2 모든 요소 무게 측정무게 클래스, 리드 및 팔로우
B3 세계가 유형, 색상, 사운드를 정하게 하기소스에서 채워진 원장 행
B4 검증 후 렌더링검사된 히어로 프레임, 그 다음 파일
C · 증명C1 측정 및 확인check.py 보고서, 연락처 시트, 텔스 인덱스
C2 주장 태그 및 전달증거 그룹화된 핸드오프

작업 모드

  • Sprint (짧은 단일 아이디어 작품 또는 "그냥 만들어"): 직접 소스 세계를 선택하고, 다섯 줄 원장(로그라인, 세계, 히어로 비트, 대체된 세 가지 기본값, 캔버스)을 작성한 후 제작합니다. 검증 및 측정은 여전히 실행됩니다.
  • Studio (브랜드 작업, 긴 작품, 불명확한 브리프): --stills와 함께 두 개의 후보 소스 세계에 대한 히어로 프레임을 렌더링하고 두 이미지를 나란히 보여줍니다. 사람들은 설명보다 사진을 더 빨리 판단합니다. 사용자가 선택합니다. 아무도 없으면 썸네일 찡긋 검사(C1)에서 살아남는 히어로 프레임을 유지하고 그 이유를 원장에 기록합니다.
  • Series (하나의 채널 또는 캠페인을 위한 에피소드): 프로젝트의 모든 이전 ledger.md를 먼저 읽습니다. 새 에피소드는 이전 소스 세계와 이전 히어로 비트 구조를 모두 반복할 수 없습니다. 브랜드 상수는 fixed 태그를 가지며 면제됩니다.
  • Revision (전달된 작품에 대한 피드백): 각 피드백을 비트 시트 행에 매핑하고 변경 사항을 비트 시트 diff(이전 행 → 새 행)로 작성합니다. 예: "처음이 너무 느리다" → grid 6-30 → 4-16, hold 30-60 → 16-40, 이후 모든 행이 -20프레임 이동합니다. 검토를 위해 변경된 범위(--range)만 렌더링한 다음 전체 작품을 렌더링하고 diff를 원장에 추가합니다.
  • Narrated explainer (비디오 에세이, 다큐멘터리, 역사, 금융, 범죄 또는 과학 이야기를 나레이션으로 구동, 종이 콜라주 스타일): 나레이션이 시계 역할을 하며 모든 문장이 비트가 됩니다. 두 가지 규칙이 품질의 대부분을 담당합니다. 홀드는 문장과 함께 끝나고, 화면의 모든 사실은 말하거나 슬립에 출처를 표시합니다. references/paper-collage-explainer.md를 읽고 assets/collage-template.html에서 시작합니다.

프로덕션 레벨

모드와 관계없이 모든 작품에는 원장에 기록된 레벨이 있습니다:

  • Graphic (기본값): 평평한 캔버스 위의 소스 세계 문법. 오버레이, 하단 1/3, UI 요소, 데이터 히트 및 편집자가 합성하는 모든 것에 적합합니다.
  • Film: 카메라를 통해 보고, 세계가 설명하는 광원으로 조명되며, 재질, 비트 사이의 생동감, 3~4개의 장면 및 음악이 포함된 디자인 사운드가 있는 장소의 아티팩트입니다. 쇼릴, 랜딩 페이지 및 저장소 메인 페이지, 브랜드 필름, 론칭, 지도 및 경로 쇼케이스, 그리고 "시네마틱", "생동감", "프리미엄" 또는 "덜 평평한"을 요청할 때 적합합니다. 계획하기 전에 references/film-level.md를 읽으십시오. 비트 시트 위에 장면 목록과 자체 검사를 추가합니다.

단계 A · 결정

A1 머신 프로브

node scripts/render.mjs --doctor

출력이 백엔드를 결정합니다: Node, Playwright 또는 설치된 Chrome/Edge, ffmpeg, ffprobe, NVENC. 한 줄로 사용자에게 보고합니다. HTML 경로를 사용할 수 없으면 B4에 대안이 나열됩니다. 사용자가 이미 Remotion 또는 HyperFrames 프로젝트를 가지고 있으면 그 안에서 작업합니다.

A2 브리프 분석

  1. 로그라인: 비디오가 말하는 단일 문장. 로그라인이 없으면 작품이 장식으로 전락합니다. 초안을 작성하고 확인합니다.
  2. 캔버스: 비율, 길이, 프레임레이트, 목적지. 크기 및 안전 영역: references/formats-and-safe-zones.md.
  3. 인벤토리: 푸티지, 화면 캡처, 로고, 사진, 데이터, AI 플레이트. 기존 자료는 개념 위에 얹히는 것이 아니라 개념을 형성합니다.
  4. 사운드트랙: 나레이션, 음악 또는 없음. 나레이션이나 음악이 있으면 오디오가 타이밍을 설정합니다(references/sound-and-sync.md). 사용자가 제공한 오디오는 최종본입니다. 사용자의 승인 없이 일시 중지를 추가하거나 제거하거나, 자르거나, 늘리거나, 재시간 조정하지 마십시오. 대신 그림을 조정합니다.
  5. 가드레일: 브랜드 글꼴 및 색상, 필수 및 금지 요소, 마감일.

알려지지 않은 것은 원장에서 assumed 태그로 가정이 됩니다. 답변이 소스 세계를 변경할 때만 질문합니다.

A3 소스 세계 찾기

"스타일"을 선택하지 마십시오. 주제 세계의 실제 아티팩트를 선택하고 그 문법을 차용하십시오: 조석표, 약국 전단지, 분할 플랩 출발 보드, 지진 기록지, 수정된 문서, 편집자의 스크랩 책상. 하나의 아티팩트가 여러 결정을 함께 해결합니다 - 사용된 서체, 팔레트를 제공하는 잉크와 재료, 요소가 변하는 방식(뒤집기, 인쇄, 스탬프, 채우기, 플롯), 표면 - 따라서 결정들이 서로 일관성을 갖습니다.

  1. 주제와 함께 사는 사람들이 실제로 다루거나 읽는 다섯 가지 아티팩트를 나열합니다.
  2. 움직임이 내장된 것을 선호하십시오: 스스로 뒤집히거나, 인쇄되거나, 채워지거나, 플롯되거나, 스탬프되거나 스크롤되는 것.
  3. 사진이 아닌 규칙을 차용하십시오. 텍스트 뒤에 티켓 사진이 아니라 티켓의 논리: 천공이 분리하고, 일련 번호가 계산하며, 스탬프가 취소합니다.

references/source-worlds.md는 움직이는 방식에 따라 그룹화된 31개의 세계를 설명합니다. 보정 자료로 취급하십시오. 작업에 가장 좋은 세계는 목록에 없는 경우가 많습니다.

두 가지를 더 이름 지정:

  • 스토리 장치: 로그라인이 어떻게 보이게 되는지에 대한 한 문장("조석 곡선이 플롯되고 프레임의 물이 펜을 따라갑니다").
  • 히어로 비트: 로그라인을 전달하는 비트. 가장 긴 계획된 홀드와 작품에서 가장 큰 상태 또는 규모 변화를 얻습니다. 렌더링 후 check.py가 측정하는 가장 긴 홀드는 히어로의 것이어야 합니다. 그렇지 않으면 강조가 잘못된 곳에 있습니다. 나레이션 아래에서 홀드는 여전히 문장과 그 뒤의 일시 중지와 함께 끝납니다. 히어로에 더 많은 시간이 필요하면 나레이션이 아직 작성되거나 녹음되는 동안 더 긴 일시 중지를 요청하십시오. 완성된 나레이션이 있으면 홀드를 맞추고 다음 줄 위에 그림을 절대 유지하지 마십시오.

A4 기본값 작성 후 뒤집기

첫 번째 아이디어는 일반적으로 가장 흔한 것입니다. 그것을 보이게 만든 다음 교체하십시오:

  1. 이 비디오의 기본 버전을 정직한 한 줄로 작성하십시오: 평균 모델이 이 프롬프트에서 만들 것입니다.
  2. 그 줄에서 최소 세 가지 결정(서체, 팔레트, 레이아웃, 등장, 전환, 사운드)을 선택하고 각각에 대해 소스(소스 세계, 재료, 데이터 또는 사운드트랙)와 함께 대체품을 작성하십시오.
  3. 이유를 대체할 수 없는 기본값은 유지될 수 있습니다. owned default로 표시되어 원장에 들어갑니다.

A5 원장 유지

제작하기 전에 채우고, 보여주고, 컴포지션 옆에 ledger.md로 저장합니다. 또한 다음 에피소드를 위한 메모리입니다.

LEDGER · <프로젝트> · <날짜>
Logline:
Canvas: 1080×1920 · 30 fps · 8 s · Reels · safe zone: vertical
Source world:
Story device:
Hero beat (frames):
Default version (one line):

| Layer       | Decision                  | Source / reason                 | Default it replaces |
|-------------|---------------------------|---------------------------------|---------------------|
| Type        |                           |                                 |                     |
| Palette     | hex values + job of each  | sampled from ...                |                     |
| Layout      |                           |                                 |                     |
| Time base   | fps, weight classes, holds|                                 |                     |
| Texture     |                           |                                 |                     |
| Sound       |                           |                                 |                     |
| Transitions |                           |                                 |                     |

Rights (fonts, music, data, imagery):
Assumptions:

단계 B · 제작

B1 프레임 단위 계획

비트 시트는 간결한 노출 시트입니다: 코드 전에 데이터로 작성된 모션. 범위는 프레임 단위의 [in, out)입니다. 홀드는 자체 행을 얻습니다.

BEAT SHEET · 30 fps · 240 frames (8 s) · 1080×1920
| Beat | Frames   | Element     | Class     | Action                          | Carries | Sound        |
|------|----------|-------------|-----------|---------------------------------|---------|--------------|
| 1    | 6-30     | grid        | mark      | lines plot, staggered           | enter   | pen          |
| 1    | 30-60    | -           |           | HOLD                            |         |              |
| 2    | 60-168   | tide curve  | set piece | plots; water follows the tip    | link    | low swell    |
| 2    | 168-198  | -           |           | HOLD (hero)                     |         | silence      |
| 3    | 198-200  | headline    | stamp     | lands in the water              | land    | one knock    |
HOLDS: 30-60, 168-198, 200-240  →  planned hold ratio 42%

Carries는 시청자가 얻는 것을 명명합니다: 요소가 enter하고, 두 가지가 link하고, 상태가 changes하거나, 비트가 사운드트랙에 lands합니다. 빈 Carries 셀은 장식을 표시합니다. 제거합니다.

Hold ratio는 의미 있는 움직임이 없는 프레임의 비율입니다. 설명 및 타이틀 작업은 일반적으로 약 20-35%, 뮤직 컷 몽타주는 더 낮고, 사색적인 작품은 더 높습니다. 그레인 및 느린 2px 미만 드리프트는 텍스처이지 움직임이 아닙니다. check.py는 비율을 측정하여 계획과 결과를 비교할 수 있습니다.

나레이션이나 음악이 있으면 단어 및 비트 타임스탬프를 프레임 번호로 변환하여 시트에 작성합니다. 나레이션 아래에서 각 비트는 cue(첫 번째 강세 단어)도 얻습니다. 비트의 주요 요소는 큐까지 제자리에 있어야 하며, 홀드가 다음 문장으로 실행되지 않습니다.

B2 모든 요소 무게 측정

모든 요소에 무게 클래스를 부여합니다. 클래스는 references/motion-and-timing.md의 세트에서 곡선과 지속 시간을 선택하므로, 지속 시간은 취향이 아니라 질량이 다르기 때문에 다릅니다.

ClassTypical elementsArriveLeaveCurve
propdots, tags, small numbers6-12 f4-8 fsettle in, launch out
paneltitles, cards, chart blocks14-24 f10-16 fheavy
set piececamera, water planes, maps, large fields30-90 f20-45 fheavy; linear for machinery
marklines, routes, underlines, handwritinglength ÷ ~30 px per framefadespen
stampcancels, final values, cuts1-2 f-step
  • 리드 및 팔로우. 어떤 순간에 하나의 움직임이 리드합니다. 다른 움직임은 그것에 의해 발생합니다(펜이 극단에 도달하므로 레이블이 열립니다).
  • 의존성 순서. 요소는 그것이 의존하는 것이 화면에 나타난 후에만 나타납니다: 축은 데이터보다 먼저, 경로는 마커보다 먼저.
  • 포스터 프레임. 프레임 0은 종종 썸네일이므로 완성된 읽기 가능한 이미지로 구성하고 모션이そこ에서 자라도록 하십시오.
  • 프레임 퓨어. 모든 값은 프레임 번호만으로 계산됩니다: 벽시계 CSS, 타이머 또는 시드되지 않은 무작위성 금지(references/composition-contract.md).

B3 세계가 유형, 색상, 사운드를 정하게 하기

  • 유형은 소스 세계에서 상속됩니다. 강조는 썸네일 찡긋 검사(C1)에서 살아남아야 합니다: 회색조의 작은 크기에서 색상으로만 표시된 단어는 사라지므로 크기, 무게, 배치 또는 타이밍으로 강조하십시오. <html lang>을 설정하고 로케일 인식 대소문자를 사용하십시오. render.mjs는 실제 페이지에 있는 텍스트를 글리프 테스트합니다. 세부 사항: references/typography.md.
  • 색상: 모든 색상에는 명명된 작업(바닥, 유형, 신호, 데이터 시리즈)이 있습니다. 작업이 없는 색상은 제거됩니다. 발명하는 대신 값을 샘플링하십시오: python scripts/check.py --palette reference.jpg. 세부 사항: references/color-and-texture.md.
  • 사운드 문은 측정됨(Measured) 또는 확인되지 않음(Not verified)으로만 표시됩니다. 오디오는 눈으로 검사할 수 없기 때문입니다. 사운드 열의 모든 항목은 보이는 원인 또는 배경을 가리킵니다. 세부 사항: references/sound-and-sync.md.

B4 검증 후 렌더링

백엔드시기
HTML + render.mjs--doctor가 통과할 때마다 기본값. assets/composition-template.html(또는 나레이션 설명의 경우 assets/collage-template.html)에서 시작합니다. 계약: references/composition-contract.md.
Remotion / HyperFrames사용자가 이미 하나에서 작업 중입니다. 동일한 원장 및 비트 시트, 다른 구문: references/backends.md.
아티팩트 미리보기환경이 모션 또는 비디오 아티팩트 유형을 제공하고 미리보기로만 제공되는 경우에만. 결과물은 여전히 렌더링된 파일입니다.
플레이트코드가 설득력 있게 그릴 수 없는 장면(사람, 움직이는 실제 장소)은 텍스트 없이 플레이트로 푸티지 또는 비디오 모델에서 제공됩니다. 모든 타이포그래피는 컴포지션에 남아 있습니다. references/backends.md.

지도, 지구본 및 경로: references/maps.md도 읽으십시오(쇼케이스 경로의 경우 §7a).

나머지를 구축하기 전에 히어로 비트를 검증하십시오:

node scripts/render.mjs comp/index.html --stills 0,170,last             # poster, hero, end frame
node scripts/render.mjs comp/index.html --range 150-210 --scale 0.5     # hero beat at half size
node scripts/render.mjs comp/index.html -o comp/out.mp4                  # full render
node scripts/render.mjs comp/index.html --alpha -o comp/overlay.mov     # ProRes 4444 with alpha

이미지 도구로 증명 이미지를 엽니

…

[번역을 위해 잘림]

관련 스킬