lovisdotio/motion2code

어떤 프로젝트인가요?

핵심 기능

• 01분석을 위해 원본 동영상을 프레임, 컷 지점, 팔레트, 루프 점수로 나눕니다.
• 02단일 GSAP 타임라인으로 구동되는 인라인 SVG 애니메이션을 만듭니다.
• 03결정론적인 프레임별 렌더링을 위해 window.anim.seek(t)를 제공합니다.
• 04시점별 차이 점수와 함께 원본과 코드를 나란히 비교합니다.
• 05루프 연결 지점을 측정하고 결과물을 mp4, GIF 또는 PNG 프레임으로 렌더링합니다.

활용 사례

• 모션 디자인 클립을 편집 가능하고 해상도에 구애받지 않는 웹 코드로 재현합니다.
• 앱이나 웹사이트의 화면 녹화 영상을 스크롤 애니메이션이 적용된 실제 인터랙티브 페이지로 구현합니다.
• AI가 생성한 애니메이션이 참조 영상과 프레임별로 일치하는지 확인합니다.

빠른 시작

1. 1

   코딩 에이전트에 스킬을 설치하세요

   npx skills add lovisdotio/motion2code
2. 2

   Python 3.9 이상과 ffmpeg를 설치하세요(브라우저 기반 스크립트를 사용할 때만 Playwright가 필요합니다)

3. 3

   재구성하기 전에 원본 동영상을 살펴보세요

   python3 scripts/study_video.py clip.mp4 -o study/

사용 전 알아둘 점

• !스크립트에는 ffmpeg가 필요하며, 일부 검사 및 렌더링에는 Chromium과 Playwright가 필요합니다.
• !이 워크플로는 제공된 원본 동영상을 바탕으로 코딩 에이전트가 작업을 수행하도록 설계되었습니다.

포함된 컬렉션

토픽

자주 묻는 질문

motion2code은(는) 무엇인가요?

모션 디자인 영상을 프레임별로 원본과 비교하며 반복 재생되는 인라인 SVG 및 GSAP 코드로 재현하는 에이전트 스킬입니다. Motion2Code는 Claude Code, Codex, Cursor 같은 코딩 에이전트를 위한 스킬입니다. 에이전트는 동영상을 볼 수 없기 때문에 클립을 재현하라는 요청을 받으면 타이밍, 이징, 색상을 대략 짐작하는 경우가 많습니다. 이 스킬은 원본 동영상을 프레임, 팔레트, 루프 점수로 분석하고, 하나의 GSAP 타임라인으로 구동되는 인라인 SVG 도형을 사용해 애니메이션을 만든 다음, 프레임별로 원본과 비교하는 작업 흐름을 제공합니다.

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

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

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

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

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

모션 디자인 클립을 편집 가능하고 해상도에 구애받지 않는 웹 코드로 재현합니다. 앱이나 웹사이트의 화면 녹화 영상을 스크롤 애니메이션이 적용된 실제 인터랙티브 페이지로 구현합니다. AI가 생성한 애니메이션이 참조 영상과 프레임별로 일치하는지 확인합니다.

motion2code는 어떻게 설치하나요?

코딩 에이전트에 스킬을 설치하세요: npx skills add lovisdotio/motion2code Python 3.9 이상과 ffmpeg를 설치하세요(브라우저 기반 스크립트를 사용할 때만 Playwright가 필요합니다) 재구성하기 전에 원본 동영상을 살펴보세요: python3 scripts/study_video.py clip.mp4 -o study/

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

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