p5.js와 p5.brush로 Claude를 활용해 손그림풍 만화 캐릭터를 애니메이션화하는 스타터 키트
alchaincyf/huashu-art-motion
그림과 다이어그램을 실제로 움직이게 만드는 코드 기반 애니메이션 에이전트 스킬
- 스타
- 4,525
- 포크
- 492
- 열린 이슈
- 7
- 마지막 커밋
- 4일 전
어떤 프로젝트인가요?
huashu-art-motion은 애니메이션을 전적으로 코드로 제작하는 에이전트 스킬입니다. 동굴 벽화와 이집트 벽화부터 반 고흐, 바우하우스, 8비트 픽셀 아트까지 36가지 아트 스타일 레시피를 제공하며, 각 레시피에는 이미지를 프레임 단위로 그리고 애니메이션화하는 Canvas 장면이 포함되어 있습니다. 캐릭터는 생성된 프레임을 합성해 만들 수 있고, 배경과 전환, 움직임은 코드로 처리합니다.
설명 영상 제작을 위해 Kurzgesagt, Vox, 화이트보드 스케치, 3Blue1Brown, 키노트 UI 등의 스타일을 모델로 한 8가지 애니메이션 문법과 JSON 사양으로 구동되는 매개변수화 클립을 제공합니다. 출력은 프레임 단위로 정확하며 가로형, 세로형 또는 투명 형식을 지원합니다. 긴 스크롤형 골격을 사용하면 캐릭터가 여러 그림을 차례로 걸어 지나가며 각 경계에서 스타일을 바꿀 수 있습니다.
저장소에는 참조 애니메이션을 컷, 비트 그리드, 모션 히트맵으로 분석하는 스크립트와 전달 전에 안정성, 움직임, 부드러움을 측정하는 QA 스크립트도 포함되어 있습니다. 렌더링에는 uv, ffmpeg, Playwright Chromium이 필요합니다.
핵심 기능
- 01각각 이미지를 그리고 애니메이션화하는 Canvas 장면이 포함된 아트 스타일 레시피 36가지를 제공합니다.
- 02데모 영상과 JSON 기반 클립을 포함한 설명 영상용 애니메이션 문법 8가지를 제공합니다.
- 03가로형, 세로형 또는 투명 형식으로 프레임 단위로 정확한 영상을 출력합니다.
- 04캐릭터가 여러 스타일을 차례로 지나가도록 구성하는 긴 스크롤형 골격을 포함합니다.
- 05참조 애니메이션을 컷, 비트 그리드, 모션 히트맵으로 분석합니다.
- 06안정성, 움직임, 부드러움을 측정하는 QA 스크립트를 실행합니다.
활용 사례
- 유명한 그림이 살아 움직이는 장면처럼, 코드로 스타일화된 애니메이션을 재현합니다.
- 내레이션 대본을 바탕으로 원하는 스타일의 설명 영상 클립을 제작합니다.
- 캐릭터가 여러 아트 스타일을 오가며 움직이는 전환 시퀀스를 만듭니다.
- 참조 애니메이션을 분석해 컷 타이밍과 움직임 패턴을 파악합니다.
빠른 시작
- 1
스킬 설치
npx skills add alchaincyf/huashu-art-motion - 2
프로젝트 폴더로 이동
cd huashu-art-motion - 3
샘플 장면의 프레임 하나 렌더링(uv, ffmpeg, Playwright Chromium 필요)
uv run --with playwright python scripts/engine/render.py --solo 09_postimp --stills 0.3 --out 试渲 - 4
금융 차트 예제 동영상 렌더링
uv run --with playwright python scripts/engine/render.py --spec scripts/engine/examples/t3_finance_chart.json --out 财经图表.mp4
사용 전 알아둘 점
- 스킬 콘텐츠와 문서는 중국어로 제공됩니다.
- 렌더링하려면 uv, ffmpeg, Playwright Chromium이 필요합니다.
- 일부 데모에는 직접 준비한 캐릭터 에셋이 필요하며, 발표자 주도 문법은 참고용 구현입니다.
토픽
자주 묻는 질문
- huashu-art-motion은(는) 무엇인가요?
- 그림과 다이어그램을 실제로 움직이게 만드는 코드 기반 애니메이션 에이전트 스킬 huashu-art-motion은 애니메이션을 전적으로 코드로 제작하는 에이전트 스킬입니다. 동굴 벽화와 이집트 벽화부터 반 고흐, 바우하우스, 8비트 픽셀 아트까지 36가지 아트 스타일 레시피를 제공하며, 각 레시피에는 이미지를 프레임 단위로 그리고 애니메이션화하는 Canvas 장면이 포함되어 있습니다. 캐릭터는 생성된 프레임을 합성해 만들 수 있고, 배경과 전환, 움직임은 코드로 처리합니다.
- huashu-art-motion은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- huashu-art-motion은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- huashu-art-motion은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. huashu-art-motion의 마지막 커밋은 2026년 10월 16일입니다.
- huashu-art-motion은(는) 어디에 사용할 수 있나요?
- 유명한 그림이 살아 움직이는 장면처럼, 코드로 스타일화된 애니메이션을 재현합니다. 내레이션 대본을 바탕으로 원하는 스타일의 설명 영상 클립을 제작합니다. 캐릭터가 여러 아트 스타일을 오가며 움직이는 전환 시퀀스를 만듭니다. 참조 애니메이션을 분석해 컷 타이밍과 움직임 패턴을 파악합니다.
- huashu-art-motion는 어떻게 설치하나요?
- 스킬 설치: npx skills add alchaincyf/huashu-art-motion 프로젝트 폴더로 이동: cd huashu-art-motion 샘플 장면의 프레임 하나 렌더링(uv, ffmpeg, Playwright Chromium 필요): uv run --with playwright python scripts/engine/render.py --solo 09_postimp --stills 0.3 --out 试渲 금융 차트 예제 동영상 렌더링: uv run --with playwright python scripts/engine/render.py --spec scripts/engine/examples/t3_finance_chart.json --out 财经图表.mp4
- huashu-art-motion은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/alchaincyf/huashu-art-motion
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
짧은 테마를 비트에 맞춘 모션 그래픽 영상으로 만들고 HyperFrames로 MP4 렌더링하는 Claude Code 스킬입니다.
AI에 활용할 수 있는 모션 그래픽, 카메라, UI, 웹, 사진 효과 144가지를 모아 둔 검색 가능한 라이브러리로, 각 효과의 실시간 샘플과 프롬프트를 제공합니다.
프롬프트를 짧은 절차적 캔버스 애니메이션으로 만들고, 헤드리스 브라우저와 ffmpeg로 MP4를 렌더링하는 Claude Code 스킬입니다.
코딩 에이전트가 대본을 내레이션이 있는 설명 영상이나 제품 데모로 제작합니다.
코딩 에이전트가 타임라인 기반 장면, 시각적 검토 루프, Python 사운드 엔진으로 Remotion 영상을 만들게 해주는 모션 디자인 툴킷입니다.