Joker-chichi/claude-mv-skill

수채화 애니메이션

전적으로 코드로 짧은 카툰을 만드는 방법. JohnHeibel/PDoomVideo(Claude Opus가 그린 156초 뮤직비디오)와 일반화된 키트 ClaudeAnimationBase(MIT, 여기에서는 template/로 번들됨)에서 정제되었습니다.

작동 방식: 모든 프레임은 시간 t의 순수 함수입니다. studio.html이 p5.js + p5.brush와 씬 파일을 로드하고, 각 샷이 전체 1920×1080 프레임을 수채화 채움과 끓는 잉크 선으로 그립니다. render.mjs가 headless Chrome을 구동하여 리뷰용 연락처 시트 또는 모든 프레임을 병렬로 렌더링하고, ffmpeg이 MP4(오디오가 있으면 포함)로 인코딩합니다.

워크플로

0. 스캐폴드

bash ~/.claude/skills/painted-animation/scripts/new_project.sh <project-dir>        # --keep-demo를 추가하면 예제 씬을 연결한 상태로 유지

이 명령은 템플릿을 복사하고, 데모 씬을 연결 해제하며, npm install을 실행하고 node / ffmpeg / Chrome을 확인합니다. 그런 다음 무엇이든 디자인하기 전에 <project-dir>/ANIMATION_GUIDE.md를 전체 읽으십시오: 여기에는 규칙, 애니메이션 원칙 및 전체 엔진/Clawd API가 포함되어 있습니다. Read 도구로 docs/emotions.jpg와 docs/views.jpg(모델 시트)를 살펴보십시오.

뮤직비디오나 약 20초보다 긴 동영상의 경우 references/music-video.md도 읽으십시오.

모든 뮤직비디오에 대해 스토리보드 또는 장면 구현 전에 다음 인테이크를 완료하십시오:

1. 사용자에게 노래 오디오 파일과 .lrc 가사 파일을 모두 제공하도록 요청하십시오. LRC가 예상될 때 누락된 가사를 만들어내거나, 전사하거나, 근사하지 마십시오.
2. 사용자가 이미 일부를 언급했더라도 항상 창작 방향을 물어보십시오. 한 메시지에서 하나의 자연어 질문으로 물어보고, 원하는 이야기와 전반적인 느낌, 그리고 포함하거나 피해야 할 반복적인 시각적 아이디어를 다루십시오. 이를 별도의 질문, 필드, 체크리스트 또는 다섯 부분으로 나누지 마십시오. 사용자에게 한 문장으로 답하거나 비워둘 수 있다고 알려주십시오. 예: "이 MV가 어떤 이야기와 전반적인 느낌을 가져야 하며, 포함되길 원하거나 피해야 할 반복적인 이미지가 있습니까? 선호하는 것이 없으면 비워두셔도 됩니다."
3. 수신된 파일을 확인하고 단일 답변에서 추론된 창작 방향을 요약하십시오. 내부적으로 이야기, 감정, 분위기/이미지, 시각적 모티프 및 피해야 할 내용을 추출하십시오. 사용자에게 이 다섯 가지 범주를 별도로 답하도록 요청하지 마십시오. 빈 답변은 "선호 없음"으로 처리하고, 스토리보드 중에 적절한 해석을 제안하십시오. 오디오 또는 LRC 파일이 없으면 뮤직비디오 워크플로를 일시 중지하고 요청하십시오.
4. scripts/beat_grid.py로 템포를 측정하십시오. 가사 줄은 일반적으로 예상보다 빠릅니다. 제공된 오디오와 LRC를 타이밍의 진실 공급원으로 취급하십시오.

1. 코드보다 먼저 스토리보드

프로젝트에 STORYBOARD.md를 작성하십시오(가이드 형식: 로그라인, 세계 + 팔레트 아크, 모티프, 캐릭터 감정 아크, 그 다음 reads가 있는 샷 — 뷰어가 이해해야 할 시간 제한 목록). 작업 예제: examples/xiaozhen/(31초 리릭 비디오: 스토리보드 및 전체 씬 코드).

뮤직비디오의 경우, 각 가사를 문자 그대로 설명하기보다는 사용자의 이야기와 분위기를 일관된 시각적 내러티브와 감정 아크로 전환하십시오. 사용자가 그냥 진행하라고 하지 않는 한, 스토리보드를 사용자에게 보여주고 구축하기 전에 반응을 받으십시오.

2. 샷별 구축

• src/config.js에서 duration, bpm, offset(그리고 audio)을 설정하십시오.
• src/scenes/에 장면/챕터당 하나의 IIFE 래핑 파일을 만들고, shots([[t0, fn], ...])로 끝나도록 하십시오. studio.html에 <script>를 추가하십시오.
• 먼저 주요 포즈를 차단하고, 스틸로 확인한 다음, 그 사이에 동작을 추가하십시오.

3. 렌더링 및 확인 — 모든 샷, 여러 번

코드를 읽는 것만으로는 동작을 볼 수 없습니다. 프로젝트 디렉토리에서:

node render.mjs --sheet=0.1,0.8,1.6,2.4 --cols=4 --w=480 --out=out/check/a.jpg        # 키 프레임
node render.mjs --strip=2.1:2.6 --out=out/check/strip.jpg                             # 특정 순간의 모든 프레임
node render.mjs --sheet=2.3 --crop=760,420,500,400 --w=500 --out=out/check/face.jpg   # 전체 해상도 디테일

각 이미지를 Read로 열고 가이드의 리뷰 목록과 실제로 확인하십시오: 이벤트가 명확한가? 캐릭터가 충분히 큰가? 처음 보는 뷰어가 reads를 시간 내에 이해할 수 있는가? 예상 / 후속 동작, 스냅 없음? 발과 잡은 소품이 닿고 있는가? 모든 이음새에 전환이 있는가? 텍스트 없음, 3D 없음, 순수 검정/흰색 없음, 흐릿한 글로우 없음? 수정하고 다시 확인하십시오. 예산: 샷당 ≥ 1개의 시트, 주요 동작 및 전환당 스트립, 이야기를 전달하는 얼굴당 크롭.

연락처 시트, 스틸, 짧은 스트립 및 기타 몇 프레임 미리보기는 현재 클라우드 환경에서 렌더링하고 검토할 수 있습니다. 이러한 미리보기 렌더링은 의도적으로 작고 목표 지향적으로 유지하십시오. 전체 동영상을 렌더링하는 대체물이 아니라 시각적 검증을 위한 것입니다.

4. 동영상 렌더링

완전한 렌더링을 직접 시작하지 마십시오. 미리보기 검토가 끝난 후, 사용자에게 완전한 클라우드 렌더링이 매우 느릴 수 있음을 알리고 최종 동영상을 로컬에서 렌더링할지 클라우드에서 렌더링할지 명시적으로 물어보십시오. 답변을 기다리십시오. 스토리보드 승인, 미리보기 승인 또는 이전의 일반 진행 지시는 렌더링 권한이 아닙니다.

• 사용자가 로컬 렌더링을 선택하면 클라우드 전체 렌더링이 금지됩니다. 사용자가 나중에 명시적으로 변경하지 않는 한 클라우드에서 전체 시퀀스를 시작하지 마십시오. 검증된 프로젝트 파일을 마무리하고, 로컬 운영 체제를 모르면 물어본 다음, 해당 플랫폼에 대한 정확한 전제 조건, npm install, 프레임 렌더링 및 인코딩 명령을 제공하십시오. 승인된 내용을 사용자가 알 수 있도록 미리보기 이미지를 계속 사용할 수 있게 하십시오.
• 사용자가 클라우드 렌더링을 선택하면 예상 지속 시간, 프레임 수 및 예상 비용/시간을 확인한 다음 재개 가능한 다중 작업자 렌더링을 진행하십시오.
• 사용자가 답변하지 않거나 모호한 답변을 하면 완전한 렌더링을 실행하지 마십시오. 명시적인 로컬 또는 클라우드 선택을 다시 요청하십시오.

node render.mjs --clip --out=out/video.mp4                                   # 짧은 동영상, 작업자 1명
node render.mjs --frames --workers=4 && node render.mjs --encode --out=out/video.mp4 [--audio=assets/song.mp3]   # 긴 동영상, 병렬 + 재개 가능

출력 경로, 길이 및 ms/프레임을 보고하십시오. open out/video.mp4를 제안하십시오.

가장 중요한 규칙

다음은 가이드 규칙을 요약한 것입니다. 가이드가 권위적입니다.

1. 수제 매체. paint() / inkLine()(p5.brush)만 사용하십시오. 일반 p5 rect/ellipse/fill은 절대 사용하지 마십시오. 평면 2D만: 회전은 그려진 키 뷰(turn(), spinView())를 통해, 절대 3D 투영을 사용하지 마십시오. 조명은 glow()(가산)를 통해, 왜냐하면 안료 혼합은 노란색 위에 파란색이 녹색으로 변하기 때문입니다.
2. 텍스트 없음. 캡션, 레이블, 표지판 또는 말풍선 없음; 대신 보여주십시오. 반응은 그려진 이모트(!, 땀방울, 하트…)입니다. 유일한 예외는 리릭 비디오의 가라오케와 기껏해야 몇 개의 큰 SFX입니다.
3. 모든 샷에서 무언가가 발생 — 이벤트, 원인 → 반응, 설정이 보답하는 것.
4. 뷰어를 위한 시간. 각 샷의 reads를 나열하십시오. 한 번에 하나의 read; 빠른 동작, 유지되는 의미; 시선을 이끌기; reads가 샷 길이를 설정합니다. 이것이 생성된 애니메이션이 가장 실패하는 부분입니다.
5. 살아 있음. 아무것도 멈춰 있지 않습니다(feel()의 아이들, 떠다니는 카메라, 보일). 얼굴은 교체가 아닌 emotions()를 통해 변합니다. 캐릭터는 큽니다(미디엄 샷 u≈20–28, 클로즈업 40–70). 모든 것이 비트를 탑니다.
6. 모든 이음새에 전환, 이야기에 맞게 선택(브러시 와이프, 아이리스 / 모양 아이리스, 채찍 팬, 매치 컷, 액션 컷, 카메라 캐리 스루).
7. 하나의 작품. 하나의 세계, 색상 아크, 감정적 실, 연결된 장면, 시작과 운율이 맞는 결말.

엔진 주의사항

• t의 순수 함수. 프레임은 병렬 및 순서 없이 렌더링됩니다: 프레임 간 상태 없음, Math.random() 없음, 프레임별 물리 없음. 안정적인 무작위성에 hash(i), 보일에 jit().
• **각 별도의 배경 요소/소품 앞에 boilSeed(key)**를 사용하십시오. 그렇지 않으면 움직이는 것이 그 뒤에 그려진 모든 것을 모든 프레임에서 다시 보일(지터)하게 만듭니다.
• p5의 전역 이름을 사용하지 마십시오. p5는 line, OVERLAY, text, color, scale, …을 전역으로 정의합니다. 최상위 function line()은 Cannot redefine property로 실패하고 페이지가 준비되지 않습니다(렌더러가 타임아웃됨). 헬퍼를 장면 IIFE 내부에 유지하거나 고유한 이름을 지정하십시오.
• 문, 창문 및 화면의 레이어링: 내부를 그린 다음, 주변 벽/프레임을 다시 그 위에 그려서, 열린 부분보다 넓은 것이 외부에 보이지 않도록 하십시오(기차의 inDoor + 문틀, TV 베젤 조각).
• 포인트 목록의 NaN은 Failed to construct 'OffscreenCanvas'를 던집니다 — 변질된 기하학을 방지하십시오.
• 카메라 줌 ≳ 2에서 큰 모양은 윤곽선을 잃습니다. 윤곽선 두께는 줌에 따라 확장되므로 클로즈업에서 sw를 줄이십시오.
• 비용 = 채움과 획의 수. ≤ ~1.5–2.5초/프레임을 목표로 하십시오(로그가 ms/프레임을 출력함). 더 적고 더 큰 모양을 선호하십시오. 실제 GPU가 없는 기계에서는 수채화 채움이 느립니다 — 더 적은 fill 모양 또는 최후의 수단으로 --soft-gl을 고려하십시오.
• macOS: 렌더러는 --use-angle=metal을 사용하고 /Applications/Google Chrome.app을 자동으로 찾습니다. 그렇지 않으면 --chrome=<path>를 전달하십시오.

적응

• Clawd는 기본 스타일일 뿐 필수 요구 사항이 아닙니다. 새로운 캐릭터, 소품 및 감정은 동일한 도구(paint, ribbon, through, glow)로 그려지고 샷 간에 모델을 유지합니다. 새로운 감정은 src/clawd.js의 EMO에 들어갑니다.
• src/karaoke.js(템플릿)는 core.js의 window.overlayHook 훅을 통해 리릭 비디오용 단어별 가라오케를 추가합니다.
• LOOPS.name = t => {...}; LOOPS.name.len = 4; + node render.mjs --loop=name --png는 GIF용 매끄러운 루프를 만듭니다(ffmpeg -i out/loop_name/f%04d.png …).
• 더 높은 추론 노력은 더 화려하고 상세한 장면을 제공하는 경향이 있습니다.