animate은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

animate은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

animate은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. animate의 마지막 커밋은 2026년 10월 5일입니다.

animate은(는) 어디에 사용할 수 있나요?

자료 구조나 네트워크 프로토콜 같은 기술 개념을 짧은 설명 영상으로 만드는 경우. 선택한 시각적 스타일로 역사 타임라인이나 짧은 이야기 애니메이션을 제작하는 경우. 제품의 스크린샷과 음악을 활용해 세로형 또는 정사각형 출시 영상을 만드는 경우. 프레임을 직접 그리거나 영상 편집기를 사용하지 않고 코드로 애니메이션 콘텐츠를 생성하는 경우.

animate는 어떻게 설치하나요?

Playwright와 Chromium 설치: npm i -g playwright && npx playwright install chromium Claude Code에 플러그인 마켓플레이스 추가: /plugin marketplace add cth9191/animate Claude Code에 animate 플러그인 설치: /plugin install animate@animate Claude Code에 애니메이션 요청: /animate a 45-second history of the bicycle, cut paper

animate은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/cth9191/animate

cth9191/animate

프롬프트를 짧은 절차적 캔버스 애니메이션으로 만들고, 헤드리스 브라우저와 ffmpeg로 MP4를 렌더링하는 Claude Code 스킬입니다.

GitHub에서 보기

스타: 828
포크: 120
열린 이슈: 1
마지막 커밋: 14일 전

어떤 프로젝트인가요?

Animate는 짧은 설명 영상, 역사 영상, 짧은 이야기를 코드만으로 만드는 Claude Code 스킬입니다. 각 영상은 절차적으로 그려지고 구성되는 독립형 HTML canvas 하나로 만들어지므로, 프레임이 결정론적으로 생성되며 Playwright와 ffmpeg로 MP4 렌더링이 가능합니다.

종이 오리기, 리소 인쇄, 픽셀 아트, 아이소메트릭을 포함한 기본 스타일 7가지를 제공하며, 사용자가 제공한 참조 이미지나 동영상을 바탕으로 새로운 스타일을 구현할 수도 있습니다. 사용자가 직접 음악을 제공하면 비트에 맞춰 장면 전환을 구성하고, 실제 제품 스크린샷을 선택한 스타일 안에서 애니메이션으로 표현할 수도 있습니다.

애니메이션을 만들기 전에 스토리의 주요 장면, 몇 가지 전체 크기 스타일 프레임, 스토리보드를 사용자가 확인하고 승인하도록 안내합니다. 결과물은 9:16, 1:1, 4:5, 16:9 레이아웃으로 내보낼 수 있으며, 각 비율에 맞춰 구성하므로 단순히 잘라내지 않습니다.

핵심 기능

01기본 드로잉 스타일 7가지와 참조 미디어에 맞춘 사용자 지정 스타일을 제공합니다.
02헤드리스 Chromium과 ffmpeg를 사용해 프레임 단위로 결정론적인 MP4 렌더링을 지원합니다.
03사용자가 음악 트랙을 제공하면 비트에 맞춰 장면을 전환합니다.
04faster-whisper로 단어별 타이밍을 확인하는 선택형 보이스오버를 지원합니다.
05URL에서 실제 제품 스크린샷을 가져와 스타일에 맞춰 애니메이션으로 표현합니다.
06하나의 영상으로 세로형, 정사각형, 4:5, 와이드스크린 형식을 내보냅니다.

활용 사례

자료 구조나 네트워크 프로토콜 같은 기술 개념을 짧은 설명 영상으로 만드는 경우.
선택한 시각적 스타일로 역사 타임라인이나 짧은 이야기 애니메이션을 제작하는 경우.
제품의 스크린샷과 음악을 활용해 세로형 또는 정사각형 출시 영상을 만드는 경우.
프레임을 직접 그리거나 영상 편집기를 사용하지 않고 코드로 애니메이션 콘텐츠를 생성하는 경우.

빠른 시작

1
Playwright와 Chromium 설치
npm i -g playwright && npx playwright install chromium
2
Claude Code에 플러그인 마켓플레이스 추가
/plugin marketplace add cth9191/animate
3
Claude Code에 animate 플러그인 설치
/plugin install animate@animate
4
Claude Code에 애니메이션 요청
/animate a 45-second history of the bicycle, cut paper

사용 전 알아둘 점

Claude Code, Node 18 이상, Chromium이 포함된 Playwright, PATH에 등록된 ffmpeg가 필요합니다.
보이스오버에는 faster-whisper가 설치된 Python이 필요하며, 음성용 ElevenLabs 커넥터는 선택 사항입니다.
WebGL 모션 디자인 스타일은 출시 예정으로 표시되어 있으며 아직 사용할 수 없습니다.

토픽

#claude-code #procedural-animation #canvas #motion-graphics #explainer-video #generative-art #video-rendering #animation #claude-code-plugin #claude-code-skill

자주 묻는 질문

animate은(는) 무엇인가요?: 프롬프트를 짧은 절차적 캔버스 애니메이션으로 만들고, 헤드리스 브라우저와 ffmpeg로 MP4를 렌더링하는 Claude Code 스킬입니다. Animate는 짧은 설명 영상, 역사 영상, 짧은 이야기를 코드만으로 만드는 Claude Code 스킬입니다. 각 영상은 절차적으로 그려지고 구성되는 독립형 HTML canvas 하나로 만들어지므로, 프레임이 결정론적으로 생성되며 Playwright와 ffmpeg로 MP4 렌더링이 가능합니다.
animate은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?: animate은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
animate은(는) 아직 유지보수되고 있나요?: 활발히 유지보수 중. animate의 마지막 커밋은 2026년 10월 5일입니다.
animate은(는) 어디에 사용할 수 있나요?: 자료 구조나 네트워크 프로토콜 같은 기술 개념을 짧은 설명 영상으로 만드는 경우. 선택한 시각적 스타일로 역사 타임라인이나 짧은 이야기 애니메이션을 제작하는 경우. 제품의 스크린샷과 음악을 활용해 세로형 또는 정사각형 출시 영상을 만드는 경우. 프레임을 직접 그리거나 영상 편집기를 사용하지 않고 코드로 애니메이션 콘텐츠를 생성하는 경우.
animate는 어떻게 설치하나요?: Playwright와 Chromium 설치: npm i -g playwright && npx playwright install chromium Claude Code에 플러그인 마켓플레이스 추가: /plugin marketplace add cth9191/animate Claude Code에 animate 플러그인 설치: /plugin install animate@animate Claude Code에 애니메이션 요청: /animate a 45-second history of the bicycle, cut paper
animate은(는) 어디서 받을 수 있나요?: 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/cth9191/animate

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.