코딩 에이전트가 모션 비디오를 깔끔하고 편집 가능한 코드로 재구성하도록 가르치는 스킬: 인라인 SVG 그래픽과 GSAP 타임라인을 사용하여 프레임 단위로 위치를 지정하고, 매끄럽게 루프하며, 원본 비디오와 나란히 비교할 수 있습니다. 웹사이트나 앱의 화면 녹화물은 실제로 스크롤하고 클릭할 수 있는 페이지로 만들 수도 있습니다.
스타 수 303 (+8 / 24시간)
이유
- 에이전트는 비디오를 직접 볼 수 없으므로, 먼저 study_video.py를 사용하여 클립을 0.25초당 한 프레임, 각 하드 컷 전후의 프레임, 컨택트 시트, 정확한 단색 팔레트로 분할하고 원본이 루프하는지 판단합니다.
- frame_diff.py는 임의의 시점에서 원본과 코드를 나란히 출력하고 점수를 매기며 가장 나쁜 5곳을 나열합니다. check_anim.py는 페이지 규칙, 외부 스크립트 화이트리스트, 비디오 또는 비트맵의 은밀한 임베딩 여부, 그리고 루프 이음새를 확인합니다.
- 엄격한 규칙: 주어진 비디오만 사용하며, 재생성, 임베딩 또는 프레임 추적을 하지 않고, 텍스트는 원래 프롬프트에 따라 작성합니다. 갤러리에는 6개의 재구성 예제가 있으며, 원본은 fal에서 MiniMax H3 Max로 생성되었습니다.
사용법
- Claude Code: claude plugin marketplace add lovisdotio/motion2code를 실행한 후, claude plugin install motion2code@motion2code를 실행합니다. Codex, Cursor, Gemini CLI 등은 npx skills add lovisdotio/motion2code를 사용합니다.
- 에이전트에게 "clip.mp4을 루프 가능한 SVG + GSAP 애니메이션으로 재구성해 줘" 또는 "이 앱 화면 녹화물을 실제 웹사이트로 만들어 줘"라고 말하세요. 전체 요구 사항은 prompts/convert-video-prompt.md에 작성할 수 있습니다.
- 스크립트에는 Python 3.9+, ffmpeg이 필요하며, 브라우저를 여는 스크립트는 Playwright도 필요합니다.
리스크
- 규칙은 평면 SVG 그래픽과 원본에서 추출한 단색만 사용하도록 제한합니다. README의 예제들은 모두 텍스트와 평면 그래픽 모션이며, 실사 영상 처리 방법은 명시되어 있지 않습니다.
- 저장소는 10월 20일에 생성되었으며, 라이선스는 MIT입니다. 갤러리의 원본은 비교용으로만 480p로 제공됩니다.