짧은 테마를 비트에 맞춘 모션 그래픽 영상으로 만들고 HyperFrames로 MP4 렌더링하는 Claude Code 스킬입니다.
blixvip/NullMotion
완성된 모션 그래픽 광고를 흑백 초안 장면과 동기화해 재생하고, 분석 결과를 MP4 하나로 내보내는 로컬 브라우저 도구입니다.
대체할 수 있는 제품:After Effects
- 스타
- 1,342
- 포크
- 134
- 열린 이슈
- 13
- 마지막 커밋
- 6일 전
어떤 프로젝트인가요?
Null Motion은 모션 그래픽 광고가 어떻게 제작됐는지 살펴볼 수 있는 로컬 미리보기 도구입니다. 완성된 영상이 상단에서 전체 너비로 재생되고, 각 구간 아래에는 간결한 HyperFrames 초안이 표시됩니다. 초안은 흑백에 Arial 글꼴, 단순한 도형과 기본 동작 하나로 구성됩니다. 초안 위를 재생 헤드가 가로지르며, 현재 화면에 표시된 영상 구간의 초안은 영상과 프레임 단위로 동기화되고 주황색 테두리로 강조됩니다.
이 프로젝트는 Node.js 22+에서 실행되며 런타임 의존성이 없습니다. npm start를 실행하면 127.0.0.1:4343 페이지에서 함께 제공되는 레퍼런스 영상 세 개를 재생할 수 있고, Download 메뉴에서 미리보기 전체를 영상의 오디오와 함께 1920px 너비, 24 Mbps MP4로 내보낼 수 있습니다. WebCodecs와 requestVideoFrameCallback을 사용하므로 내보내기는 Chrome 또는 Edge에서 작동합니다. 실시간 녹화 대신 절반 속도로 프레임을 렌더링해 프레임이 누락되지 않습니다.
FFmpeg와 ffprobe를 사용하는 Python 스크립트로 직접 레퍼런스 영상을 가져온 다음, JSON 파일에 각 구간의 비트를 설명할 수 있습니다. 이 프로젝트에는 AI 생성 기능이나 자막 및 일시 정지 컷 같은 호스팅 기능이 포함되지 않습니다. 이러한 기능은 별도 제품에 속합니다.
핵심 기능
- 01완성된 광고를 각 구간에 맞춰 동기화된 흑백 HyperFrames 초안과 함께 재생합니다.
- 02현재 구간의 초안을 강조하고 영상과 프레임 단위로 동기화합니다.
- 03분석 결과 전체를 오디오가 포함된 1920px 너비, 24 Mbps MP4로 내보냅니다.
- 04의존성이나 API 키 없이 Node.js 22+에서 로컬로 실행됩니다.
- 05직접 레퍼런스 영상을 가져오고 FFmpeg로 장면 전환을 감지합니다.
활용 사례
- 전문적인 모션 그래픽 광고의 구성을 구간별로 살펴보기.
- 완성된 영상 옆에 대략적인 기획안을 보여 주며 모션 콘셉트 제안하기.
- 완성된 광고와 초안을 비교하는 공유용 영상 내보내기.
- 모션 디자인 프로젝트에 사용할 레퍼런스 영상을 분석하기.
포함된 컬렉션
토픽
자주 묻는 질문
- NullMotion은(는) 무엇인가요?
- 완성된 모션 그래픽 광고를 흑백 초안 장면과 동기화해 재생하고, 분석 결과를 MP4 하나로 내보내는 로컬 브라우저 도구입니다. Null Motion은 모션 그래픽 광고가 어떻게 제작됐는지 살펴볼 수 있는 로컬 미리보기 도구입니다. 완성된 영상이 상단에서 전체 너비로 재생되고, 각 구간 아래에는 간결한 HyperFrames 초안이 표시됩니다. 초안은 흑백에 Arial 글꼴, 단순한 도형과 기본 동작 하나로 구성됩니다. 초안 위를 재생 헤드가 가로지르며, 현재 화면에 표시된 영상 구간의 초안은 영상과 프레임 단위로 동기화되고 주황색 테두리로 강조됩니다.
- NullMotion은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- NullMotion은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- NullMotion은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. NullMotion의 마지막 커밋은 2026년 10월 31일입니다.
- NullMotion은(는) 어디에 사용할 수 있나요?
- 전문적인 모션 그래픽 광고의 구성을 구간별로 살펴보기. 완성된 영상 옆에 대략적인 기획안을 보여 주며 모션 콘셉트 제안하기. 완성된 광고와 초안을 비교하는 공유용 영상 내보내기. 모션 디자인 프로젝트에 사용할 레퍼런스 영상을 분석하기.
- NullMotion은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/blixvip/NullMotion
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
TiXL은 노드 기반 프로시저럴 그래픽과 키프레임 애니메이션을 결합한 오픈 소스 실시간 모션 그래픽 도구입니다.
제품 설명을 코드 기반의 상업용 출시 영상으로 만드는 Claude Code / Codex 에이전트 스킬
AI 코딩 에이전트용으로 HTML, CSS, 미디어와 탐색 가능한 애니메이션을 결정론적 MP4 영상으로 만드는 오픈소스 프레임워크
Claude가 코드를 작성해 만든 10초 모션 디자인 영화 15편으로, 각 스타일의 프롬프트와 전체 소스 코드가 공개되어 있습니다.
코딩 에이전트가 타임라인 기반 장면, 시각적 검토 루프, Python 사운드 엔진으로 Remotion 영상을 만들게 해주는 모션 디자인 툴킷입니다.