프로젝트 소개

Null Motion은 긴 영상을 세로 클립으로 편집하는 자체 호스팅 웹 애플리케이션입니다. 이 도구는 긴 부분을 자르고, 단어에 자막을 달고, 타임라인에서 편집 내용을 검토할 수 있게 해줍니다. 핵심 기능은 완성된 모션 그래픽 광고를 위에 재생하면서 그 아래에서 파생된 단순한 흑백 HyperFrames 초안을 보여주는 미리보기 페이지입니다. 각 섹션(Hook, Reveal, App, End card)마다 하나의 초안이 있으며, 모두 필름과 프레임 단위로 동기화됩니다. 재생 헤드가 초안을 가로질러 이동하고, 활성 섹션은 주황색 윤곽선으로 표시되며 나머지는 반복됩니다. 원클릭 내보내기는 WebCodecs와 mp4-muxer를 사용하여 필름과 초안을 고비트레이트 MP4로 렌더링하고, 필름의 오디오를 포함하며, 실시간 녹화 없이 디코딩된 모든 프레임을 캡처하여 프레임 누락 없이 내보냅니다. 저장소에는 세 가지 쇼케이스 참조(Infinite Global payments 0:30, SaaS Launch sequence 1:02, Motion study 08 0:03)와 함께 재생 가능한 초안이 포함되어 있습니다. 빠른 시작에는 Node.js 22+만 필요하며, 설치할 종속성이나 키가 없습니다. 내보내기에는 Chrome 또는 Edge가 필요합니다. 워크플로우: scripts/plan-sections.mjs는 FFmpeg 장면 감지를 사용하여 참조를 실제 장면 전환에서 3~8개 섹션으로 분할합니다. public/drafts.mjs는 각 초안이 일시 중지된 GSAP 타임라인의 640×360 HTML 장면이며, 비트(텍스트, 로고, 전화, 창, 입력, 채팅, 카드, 목록, 차트, 클라우드)로 설명되는 작은 HyperFrames 엔진입니다. 재생은 필름의 클록에서 모든 초안의 타임라인을 구동합니다. Python, FFmpeg 및 ffprobe를 사용하여 자체 참조를 가져올 수 있습니다: scripts/import-motionclone.py를 통해 가져온 다음 섹션을 계획합니다. 가져온 미디어는 .local-media/ 및 public/references/(Git 무시)에 로컬로 유지되며 쇼케이스보다 우선합니다. 임포터는 비파괴적이며, 썸네일을 추출하고, 소스 비디오를 연결하며, 서버는 바이트 범위를 스트리밍하여 탐색 시 전체 비디오를 메모리에 로드하지 않습니다. 선택적 PORT 및 HOST 환경 변수는 바인드 주소를 변경합니다. 프로젝트 구조: public/demo.html, demo.mjs, demo.css(미리보기 페이지 및 내보내기), public/drafts.mjs(초안 엔진), 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). 참고: 브라우저는 이 프로젝트의 자체 출처만 호출합니다. 생성, 렌더링 서비스 및 Premiere는 연결되지 않습니다. 초안은 AI 생성이 아닌 작성되었습니다. 이전 출시 편집기(참조 타임라인, 트리밍, 브랜드 오버레이)는 /editor에 있고, 원래 Null Motion 템플릿 갤러리는 /index.html에 있습니다. 번들된 GSAP 및 mp4-muxer는 라이선스를 유지합니다(THIRD_PARTY_NOTICES.md 참조). 브랜드 아트워크와 참조 영상은 각 소유자의 자산입니다. 프로젝트 전반에 걸친 오픈 소스 라이선스는 선택되지 않았습니다.