Play a finished motion-graphics ad in sync with the rough drafts it grew from, and export the breakdown as MP4.

Null Motion — 개요

Null Motion은 완성된 모션 그래픽 광고가 어떻게 제작되었는지 초안별, 프레임별로 보여주는 무료 로컬 도구입니다. 최종 필름을 화면 상단에, 거친 흑백 초안을 하단에 배치하고 모두 동일한 타임라인에 동기화합니다. 분석을 연구하거나 단일 MP4 비디오로 내보낼 수 있습니다.

기능

상단 최종 필름 — 전체 광고가 루프로 재생되며 전체 너비로 표시됩니다.
하단 초안 — 광고의 각 섹션(Hook, Reveal, App, End card 등)에는 간단한 HyperFrames 장면이 있습니다: 흑백, Arial 텍스트, 평면 도형, 하나의 간단한 동작. 다듬기 전의 아이디어를 보여줍니다.
모두 동기화 — 재생 헤드가 초안 위를 이동합니다. 현재 화면에 표시된 섹션의 초안은 필름을 프레임별로 따라가며 주황색 윤곽선이 표시됩니다. 다른 초안은 계속해서 자신의 부분을 루프합니다.
원클릭 내보내기 — 다운로드 → 전체 미리보기는 필름과 초안을 프레임별로 1920 너비, 24Mbps MP4로 렌더링하고 필름의 오디오를 포함합니다.

빠른 시작

git clone https://github.com/blixvip/NullMotion.git && cd NullMotion
npm start                # Node 22+, 설치할 것 없음

그런 다음 http://127.0.0.1:4343을 열고 참조를 선택한 다음 다운로드 → 전체 미리보기(Chrome 또는 Edge)를 눌러 MP4를 얻으세요.

npm install 불필요, API 키 불필요, 계정 불필요. 저장소에 세 가지 참조가 포함되어 있어 첫 실행에서 작동합니다.

Null Studio와 다릅니다. 이 저장소는 무료 로컬 출시 필름 미리보기입니다. 일시 중지 컷, 자막, YouTube, Twitch 및 Kick 클립은 Null Studio의 기능으로, nullmotion.com에서 제공되는 별도의 호스팅 제품입니다. 이 코드에는 포함되어 있지 않습니다.

쇼케이스

저장소에는 초안이 포함된 세 가지 참조가 포함되어 있어 바로 재생할 수 있습니다:

참조	길이	초안
Infinite · Global payments	0:30	7
SaaS · Launch sequence	1:02	8
Motion study 08	0:03	3

이 클립은 다른 제작자의 것이며 예시로 사용됩니다. 수주 작품을 주장하는 것이 아닙니다.

작동 방식

섹션. scripts/plan-sections.mjs는 실제 장면 전환(FFmpeg 장면 감지 사용)에서 각 참조를 3~8개의 섹션으로 분할하고 모든 컷을 유지합니다. 두 비트 초안은 필름이 컷되는 정확한 순간에 전환됩니다.
초안. public/drafts.mjs는 작은 HyperFrames 엔진입니다: 각 초안은 일시 중지된 GSAP 타임라인의 640×360 HTML 장면입니다. 섹션은 하나 또는 두 개의 비트(text, logo, phone, window, input, chat, cards, list, chart, cloud 등)로 설명되며 실제 프레임의 레이아웃, 텍스트 및 타이밍과 일치하도록 작성됩니다.
재생. 페이지는 필름의 클록에서 각 초안의 타임라인을 구동합니다. 활성 섹션은 필름을 따르고 다른 섹션은 루프합니다.
내보내기. 필름의 숨겨진 복사본이 절반 속도로 재생됩니다. requestVideoFrameCallback은 디코딩된 모든 프레임을 캡처하고, 초안은 해당 프레임의 정확한 시간에 그려지며, WebCodecs는 프레임의 자체 타임스탬프로 24Mbps로 인코딩합니다. 오디오는 참조에서 복사되고 mp4-muxer가 MP4를 작성합니다. 실시간으로 녹화되는 것이 없으므로 프레임이 드롭되지 않습니다.

요구 사항

	필요한 용도
Node.js 22+	로컬 서버 실행(`npm start`). 설치할 종속성이 없습니다.
Chrome 또는 Edge	MP4 내보내기(WebCodecs + `requestVideoFrameCallback`). 재생은 모든 최신 브라우저에서 작동합니다.
FFmpeg / ffprobe(선택 사항)	자체 참조 가져오기, 섹션 계획, 쇼케이스 재구축, 가져온 참조의 오디오 추출.
Python 3(선택 사항)	`scripts/import-motionclone.py`.

자체 참조 가져오기

Python, FFmpeg 및 ffprobe가 설치된 경우:

python scripts/import-motionclone.py --source /path/to/MotionClone
node scripts/plan-sections.mjs      # 섹션 + 장면 컷 + 연락처 시트

가져온 미디어는 .local-media/ 및 public/references/(둘 다 Git에서 무시됨)에 로컬로 유지되며 쇼케이스보다 우선합니다. 각 섹션의 비트는 public/references/drafts.json에서 설명합니다. 설명되지 않은 섹션에는 자리 표시자 초안이 생성됩니다. npm run showcase는 로컬 라이브러리에서 showcase/를 재구축합니다.

가져오기는 비파괴적 세그먼트를 만들고, 썸네일을 추출하고, 소스 비디오가 이 저장소와 같은 드라이브에 있는 경우 하드 링크합니다(그렇지 않으면 복사). 원본 파일은 읽기 전용입니다. 서버는 바이트 범위를 스트리밍하므로 탐색해도 전체 비디오가 메모리에 로드되지 않습니다.

FAQ 하이라이트

내보내기에는 Chrome 또는 Edge가 필요합니다 — Firefox와 Safari는 미리보기를 재생할 수 있지만 내보낼 수는 없습니다.
내보내기에는 필름 길이의 최소 2배가 걸립니다 — 필름이 절반 속도로 렌더링되어 프레임이 건너뛰지 않습니다. 렌더링하는 동안 탭을 앞에 유지하세요.
내보내기에 소리가 없나요? — 자체 가져온 참조의 경우 서버는 첫 내보내기 시 FFmpeg로 오디오를 추출하므로 FFmpeg가 PATH에 있어야 합니다.
"Invalid cross-device link"(EXDEV)로 가져오기 실패? — 최신 main을 가져오세요. 가져오기는 이제 하드 링크가 불가능할 때 비디오를 복사합니다.
가져올 때 "No data/ folder"? — --source는 MotionClone 프로젝트 폴더(data/를 포함하는 폴더)를 가리켜야 합니다. 단일 비디오가 아닙니다.
포트 4343이 사용 중인가요? — PORT 및/또는 HOST를 설정하세요. 예: PORT=5000 npm start 또는 HOST=0.0.0.0 npm start.
"Generation not connected"? — 의도적입니다. 생성, 렌더링 서비스 및 Premiere는 이 저장소에서 연결되지 않습니다. 서버는 이러한 호출에 501 NOT_CONNECTED로 응답합니다. 초안은 작성된 것이지 AI 생성이 아닙니다.
세로 클립, 일시 중지 컷, 자막? — 없습니다. 이는 Null Studio 기능입니다.

프로젝트 레이아웃

public/demo.html · demo.mjs · demo.css   미리보기 페이지 및 내보내기 도구
public/drafts.mjs                        HyperFrames 초안 엔진(비트 종류)
public/scraps.mjs                        Interface 참조용 수동 초안
public/editor.*                          이전 출시 편집기, /editor에 있음
showcase/                                게시된 세 가지 참조
scripts/                                 가져오기, 섹션, 쇼케이스, 파형, 검사
server.js · media.js                     정적 서버, 미디어 스트리밍, 오디오 추출
test/                                    서버, 미디어 및 편집기 테스트

npm run dev     # 변경 시 재시작
npm run check   # UI 파일 검사
npm test        # node --test

참고 사항

브라우저는 이 프로젝트 자체 출처만 호출합니다.
이전 출시 편집기(참조 타임라인, 트리밍, 브랜드 오버레이)는 /editor에 있고, 원래 Null Motion 템플릿 갤러리는 /index.html에 있습니다.
번들된 GSAP 및 mp4-muxer는 라이선스를 유지합니다. THIRD_PARTY_NOTICES.md를 참조하세요. 브랜드 아트워크 및 참조 푸티지는 각 소유자에게 속하며 프로젝트 라이선스의 적용을 받지 않습니다.

기여

Null Motion은 작고, 종속성이 없으며, npm start로 실행됩니다. 기여자를 찾고 있습니다:

좋은 첫 이슈 — 작고, 범위가 명확하며, 참조할 파일이 포함되어 있습니다.
도움 필요 — 새로운 초안 비트 종류, 내보내기 옵션, 크로스 플랫폼 테스트.
아이디어 및 질문 — Discussions 또는 Discord.

이슈에 댓글을 달아 소유권을 주장하세요. 풀 리퀘스트는 며칠 내에 검토됩니다. 모든 기여자는 릴리스 노트에 기록됩니다.

라이선스

MIT. 번들된 GSAP 및 mp4-muxer는 자체 라이선스를 유지합니다(THIRD_PARTY_NOTICES.md 참조). 참조 푸티지 및 타사 브랜드 마크는 소유자에게 속합니다.

커뮤니티

질문, 도움, 피드백, 릴리스 뉴스 및 렌더링은 모두 **Discord**에 게시하세요. Null Motion이 도움이 되었다면 ⭐ 하나가 다른 사람들이 찾는 데 도움이 됩니다.

blixvip/NullMotion