Vincentwei1021/mg-styles-15

어떤 프로젝트인가요?

핵심 기능

• 01서로 다른 스타일의 영화 15편을 제공하며, 각 영화의 길이는 10초입니다.
• 02스타일마다 프롬프트, 스타일 노트, 전체 소스 코드가 제공됩니다.
• 03이미지나 동영상 생성 없이 SVG, Canvas, WebGL, Three.js, Blender를 사용해 코드로 그림을 만듭니다.
• 04녹음된 악기 샘플을 사용해 audio.py 스크립트로 사운드트랙을 합성합니다.
• 05헤드리스 Chrome 렌더러와 ffmpeg를 사용해 프레임 단위로 정확한 MP4를 생성합니다.
• 06각 영화를 탐색할 수 있는 브라우저 미리보기 페이지를 제공합니다.

활용 사례

• 특정 모션 디자인 스타일을 코드로 구현하는 방법을 익힙니다.
• 프롬프트를 재사용해 직접 애니메이션 단편을 만들 때 출발점으로 삼습니다.
• 결정론적인 동영상 출력을 위한 헤드리스 Chrome과 ffmpeg 렌더링 파이프라인을 살펴봅니다.
• AI 어시스턴트가 영화의 시각 요소와 오디오 코드를 모두 작성하는 방식을 알아봅니다.

빠른 시작

1. 1

   저장소 루트에서 Node 패키지를 설치합니다(Node.js 22.12 이상 필요).

   npm install
2. 2

   사운드트랙 및 에셋 스크립트용 Python 패키지를 설치합니다(Python 3.11 이상 필요).

   pip install -r requirements.txt
3. 3

   영화 한 편의 사운드트랙을 합성합니다.

   python3 demos/01-flat-vector/audio.py
4. 4

   해당 영화의 모든 프레임을 MP4로 렌더링합니다(Google Chrome 및 ffmpeg 필요).

   node harness/render.mjs demos/01-flat-vector

사용 전 알아둘 점

• !렌더링하려면 컴퓨터에 Google Chrome과 ffmpeg가 설치되어 있어야 합니다.
• !3D 영화에는 Blender도 필요하며, 글꼴은 저장소에 포함되어 있지 않습니다.
• !이는 영화 15편과 그 소스 코드의 쇼케이스이며, 재사용 가능한 라이브러리가 아닙니다.

토픽

자주 묻는 질문

mg-styles-15은(는) 무엇인가요?

Claude가 코드를 작성해 만든 10초 모션 디자인 영화 15편으로, 각 스타일의 프롬프트와 전체 소스 코드가 공개되어 있습니다. 이 저장소에는 10초 길이의 모션 디자인 영화 15편이 스타일별로 한 편씩 담겨 있습니다. 프레임별 셀 애니메이션과 아이소메트릭 2.5D부터 픽셀 아트, 신스웨이브, 9:16 예능 자막 편집까지 다양한 스타일을 다룹니다. 각 영화는 Claude Opus 5.5가 단일 프롬프트를 바탕으로 코드를 작성해 제작했으며, 시각 요소와 애니메이션, 음악, 음향 효과를 모두 포함합니다. 3D 영화에는 Blender를 사용하고, 나머지 그림은 생성형 이미지·동영상 모델 대신 SVG, Canvas, WebGL, Three.js로 구현했습니다.

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

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

mg-styles-15은(는) 아직 유지보수되고 있나요?

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

mg-styles-15은(는) 어디에 사용할 수 있나요?

특정 모션 디자인 스타일을 코드로 구현하는 방법을 익힙니다. 프롬프트를 재사용해 직접 애니메이션 단편을 만들 때 출발점으로 삼습니다. 결정론적인 동영상 출력을 위한 헤드리스 Chrome과 ffmpeg 렌더링 파이프라인을 살펴봅니다. AI 어시스턴트가 영화의 시각 요소와 오디오 코드를 모두 작성하는 방식을 알아봅니다.

mg-styles-15는 어떻게 설치하나요?

저장소 루트에서 Node 패키지를 설치합니다(Node.js 22.12 이상 필요).: npm install 사운드트랙 및 에셋 스크립트용 Python 패키지를 설치합니다(Python 3.11 이상 필요).: pip install -r requirements.txt 영화 한 편의 사운드트랙을 합성합니다.: python3 demos/01-flat-vector/audio.py 해당 영화의 모든 프레임을 MP4로 렌더링합니다(Google Chrome 및 ffmpeg 필요).: node harness/render.mjs demos/01-flat-vector

mg-styles-15은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/Vincentwei1021/mg-styles-15