애니메이션 스타일
열 가지 룩, 각각은 Claude가 어떤 스토리든 가리킬 수 있는 실제 코드 파일입니다. 어떤 것도 이미지나 비디오 모델을 호출하지 않으므로 동일한 스토리는 매번 동일하게 렌더링되며 비용이 들지 않습니다.
템플릿에는 완성된 22초 예제가 포함되어 있습니다: Claude가 직접 만든 로켓을 타고 달까지 날아가는 이야기를 매 박자마다 새로운 스타일로 보여줍니다. 먼저 실행하여 모든 룩이 움직이는 것을 확인한 다음 스토리를 바꾸세요.
스타일
| 파일 | 스타일 | 한 줄 설명 |
|---|---|---|
pixel.js | 픽셀 아트 | 약 120픽셀 너비로 그려지고 스무딩 없이 확대됩니다. 작은 팔레트, 디더링된 하늘, 게임 HUD |
ps2.js | PS2 스타일 | 적은 폴리곤, 흐릿한 작은 텍스처, 안개, 확대된 저해상도 그림, 미션 HUD |
comic.js | 만화 아트 | 두꺼운 잉크 선, 플랫 컬러, Ben-Day 도트, 액션 라인, 캡션 상자, 큰 BOOM |
brick.js | 레고 스타일 | 모든 것이 플라스틱 브릭으로 만들어진 부드러운 태양 아래의 장면 |
clay.js | 클레이메이션 | 엄지 자국이 있는 부드러운 형태, 부드러운 조명, 초당 12포즈 |
paper.js | 종이 컷아웃 | 작은 그림자가 있는 여러 겹의 자른 카드, 종이 섬유, 초당 8포즈 |
anime.js | 레트로 애니메이션 | 80년대 셀룰: 그라데이션 하늘, 큰 태양 원반, 스피드 라인, 히트 시 반전 프레임, 필름 그레인 |
poly.js | 로우 폴리 3D | 플랫 페이스와 하드 라이트, 둥근 것은 없음 |
riso.js | 리소그래프 | 미색 종이 위에 두 가지 잉크, 각각 고유한 하프톤 도트, 약간 어긋나게 인쇄됨 |
mini.js | 미니어처 디오라마 | 책상 위의 작은 수공예 세트, 판지와 솜, 틸트-시프트 블러 |
styles.md에는 각 스타일의 규칙이 있습니다: 그 스타일로 보이게 하는 요소, 새로운 주제를 위해 변경할 사항, 그리고 깨뜨리는 요소. 장면을 작성하기 전에 사용할 스타일의 해당 부분을 읽으십시오.
단계
- 브리프를 받으세요. 스토리나 앱이 무엇인지, 세로(Reels, TikTok)인지 가로(X, YouTube)인지, 어떤 스타일을 사용할지 확인합니다. 선호도가 없으면 박자에 맞는 3~5개의 스타일을 선택하거나 모든 10가지를 보여주기 위해 선택합니다. 전체 비디오에 하나의 스타일을 사용하는 것도 좋습니다.
copywriter.md를 사용하여 스토리를 작성하세요. 박자당 한 줄. 사용자에게 각 줄 옆에 스타일을 표시하고 승인을 기다립니다.- 템플릿을 복사하세요:
cp -r ~/.claude/skills/claude-animation-styles/template ~/my-video && cd ~/my-video && npm i. 변경하기 전에 실행되는지 확인합니다:node render.cjs stills 2,6,12를 실행하고 그림을 엽니다. 예제 스토리를 보여주므로, 작업을 시작하기 전에stills/를 삭제하세요. - story.json을 작성하세요.
format은vertical또는wide입니다. 각 박자는style(파일 이름),seconds및line을 가집니다. 동일한 스타일을 여러 박자에 사용할 수 있으며, 각각 고유한 장면을 얻습니다(아래 참조). - 사용 중인 각 스타일 파일의 장면을 다시 작성하세요. 룩을 유지하고 주제를 바꿉니다. 아래 "주제 변경"을 참조하세요.
- 매 스타일 후 스틸을 확인하세요:
node render.cjs stills 1,3.5,6. 숫자는 박자가 아닌 전체 비디오의 초 단위이며 각 그림의 파일 이름을 출력합니다. 각각을 엽니다. 소리가 꺼졌을 때 주제를 알아볼 수 있습니까? 그 스타일로 보입니까? 프레임에 의해 잘리는 부분이 있습니까? - 사용자가 원하는 경우 음성을 추가하세요:
ELEVENLABS_API_KEY=... python3 voice.py [voice_id]. 줄을 읽고voice.mp3를 작성하며 story.json의 박자 시간을 다시 조정합니다. 키가 없으면 음성이 없으므로 수동으로 초를 설정하고 음악을 추가하세요. - 렌더링:
node render.cjs video --audio voice.mp3또는 소리가 없으면 일반node render.cjs video.out/video.mp4를 작성합니다. 20초 비디오는 몇 분이 걸립니다. - 전체를 확인한 후 전달하세요:
ffmpeg -i out/video.mp4 -vf "fps=1,scale=240:-1,tile=8x4" -frames:v 1 out/sheet.jpg(초당 한 장의 그림, 끝에 빈 셀은 정상). 소리를 들을 수 없으므로 사용자에게 사운드를 확인하라고 알리세요.
음성 아래에 음악을 넣으려면, 음성보다 14dB 작게:
ffmpeg -i voice.mp3 -i music.mp3 -filter_complex "[1]volume=0.2[m];[0][m]amix=inputs=2:duration=first:normalize=0" audio.wav
트랙마다 음량이 크게 다르므로 -af ebur128로 둘 다 측정하고 볼륨을 조정하세요.
주제 변경하기
각 스타일 파일에는 세계를 한 번 구축하는 create 하나와, t가 박자의 초이고 dur가 박자의 길이일 때 어떤 순간이든 그리는 render(t, ctx, dur) 하나가 있습니다. t만 보므로 어떤 프레임이든 순서에 상관없이 그릴 수 있습니다.
스타일을 두 번 사용하는 경우. create는 index(story.json에서 박자의 위치), line 및 beat를 받습니다. this.index = index를 저장하고 각각에 대해 다른 장면을 그립니다. 이를 위해 start를 테스트하지 마세요. 타이밍이 변경될 때마다 바뀌기 때문입니다.
2D 스타일(픽셀, 만화, 종이, 애니메이션, 리소). 주제는 작은 페인터를 통해 그려집니다: paint.fill(path, key) 및 paint.lines(segments, width, key), 각 스타일이 그 동작을 결정합니다. 만화에서는 잉크 선을 추가합니다. 종이에서는 그림자를 추가합니다. 리소에서는 잉크 밀도를 적용합니다. lib/common.js에는 예제 주제 drawClaude 및 drawRocket이 있습니다. 동일한 방식으로 drawCat, drawPhone 또는 drawFounder를 작성하고 모든 스타일에서 동일한 조각 이름을 사용하면 각 룩을 자동으로 얻습니다. 새 조각 이름(fur, apron)은 해당 스타일의 팔레트(만화, 종이, 애니메이션에서는 PAL, 리소에서는 toneA 및 toneB)에 추가해야 하며, 그렇지 않으면 오류 없이 잘못된 색상으로 칠해집니다. 픽셀 아트는 자체 스프라이트를 그리므로 수동으로 작성하세요.
3D 스타일(ps2, brick, clay, poly, mini). lib/three-claude.js는 폴리곤 수와 재질을 결정하는 kit를 사용하여 주제를 간단한 모양으로 구축합니다. 동일한 방식으로 주제를 구축하세요: makeCat(kit). 레고 스타일은 모든 것이 브릭으로 만들어져야 하므로 예외이며, add 헬퍼를 복사하세요.
모든 스타일에서 주제를 동일하게 유지하세요. 동일한 실루엣, 동일한 두세 가지 색상. 이것이 스타일 변경이 새 클립이 아닌 동일한 스토리로 읽히게 만드는 요소입니다. 하나의 간단하고 알아볼 수 있는 형태가 세부 캐릭터보다 낫습니다.
이것이 효과적인 이유
- 하드 컷에서 스타일을 변경하세요. 다음 룩으로 바로 자릅니다. 놀라움이 전환입니다.
- 중앙에서 움직이는 하나의 큰 것. 사람들은 종종 소리가 꺼진 휴대폰에서 1초 안에 각 박자를 이해해야 합니다.
- 각 박자는 1.5초에서 3초. 룩을 볼 수 있을 만큼 길고, 다음을 위해 머물게 할 만큼 짧습니다.
- 컷을 통해 스토리가 계속 움직이도록 하세요. 한 박자의 끝에서 로켓이 상승 중이라면, 다음 박자의 시작에서도 여전히 상승 중이어야 합니다.
- 텍스트는 스타일에 속합니다. 게임 룩에서 HUD, 만화 룩에서 캡션 상자. 자막은 건너뛰세요.
문제 발생 시
- Puppeteer 또는 Three.js 누락:
render.cjs가 있는 폴더에서npm i. - ffmpeg 누락: Mac에서
brew install ffmpeg. 스틸은 ffmpeg 없이 작동하며 비디오에는 필요합니다. - 검은 3D 프레임 또는 매우 느린 렌더: 렌더는 Mac에서 GPU를 사용하고 다른 곳에서는 소프트웨어 렌더러를 사용합니다(
render.cjs의gl라인). 소프트웨어 렌더링은 작동하지만 훨씬 오래 걸립니다. - 잘못된 글꼴의 헤드라인: 페이지가 Google Fonts에서 Inter Tight와 Bangers를 로드하므로 렌더링 중에 인터넷이 필요합니다.
- 만화 스타일의 단어가 늦게 표시됨: 카운트다운은 음성이 있을 때
voice.json에서 단어 시간을 읽습니다.comic.js에서 찾는 단어를 변경하세요.
자신만의 것으로 만드세요
룩을 복사하고 자신만의 주제를 만드세요. 브랜드 로고, 게임 캐릭터 또는 실제 회사의 세트 피스를 화면에 사용하지 말고, 다른 크리에이터의 장면을 샷 대 샷으로 복사하지 마세요.