twodorz/motion-studio

Motion Studio

단편 영화(일반적으로 9:16 1080×1920 릴, 16:9 / 1:1 / 4:5도 가능)를 완전히 코드로 제작합니다.

• 그림. window.renderAt(t)가 시간 t에 대한 정확한 프레임을 그리는 HTML 페이지(comp.html).
• 캡처. Headless Chromium이 모든 프레임을 캡처하고, ffmpeg이 인코딩합니다.
• 사운드. 동일한 타임라인에서 Python으로 합성: 음악, 사운드 이펙트 및 앰비언스, −14 LUFS로 마스터링.
• 3D(선택 사항). 작은 GPU 경로 추적기(pt.js)로 생성된 장면으로, 부드러운 조명, 실제 반사, 피사계 심도 및 모션 블러를 제공합니다.

시청자가 보는 모든 것은 t의 순수 함수입니다. 이것이 렌더링을 반복 가능하고, 탐색 가능하며, 재개 가능하게 만듭니다.

요청이 이미 존재하는 동영상을 편집, 자막 추가, 압축 또는 색 보정하는 것이거나, 슬라이드 또는 웹사이트 애니메이션을 구축하는 것이라면, 이 스킬이 적절한 도구가 아니라고 말하고 대신 직접 도움을 주십시오. 제공된 영상(이벤트, DJ, 작년 파티)으로 프로모를 만드는 것은 범위 내에 있습니다: templates/footage/ 및 references/footage-promos.md를 참조하세요.

이 스킬에 포함된 항목

경로	설명	읽어야 할 때
references/setup.md	스튜디오의 일회성 설치(Node, ffmpeg, Playwright, Python venv, GPU 확인)	머신에서 처음 사용할 때
references/render-pipeline.md	렌더링 계약, render.mjs 모드, 청크 렌더링, ffmpeg 주의사항, 결정론, 연락 시트	영화를 제작하거나 렌더링할 때
references/design-rules.md	실제 클라이언트 피드백에서 얻은 스토리텔링, 레이아웃, 타이포그래피, 모션 및 전환 규칙; 감사	스토리보드 전과 모든 리뷰 전
references/sound.md	이벤트 기반 스코어 + 사운드 디자인, 믹스 목표, 측정, 라우드니스 마무리	오디오 작업 시
references/path-tracer-3d.md	3D 경로 추적기: 세트, 재질, 조명, 정확한 치수의 제품 모델링, 카메라, 매치 컷, 비용	영화에 3D 장면이 필요할 때만
references/claims-and-sources.md	사실 확인: 공식 출처, CLAIMS.md, 절대 주장하지 말아야 할 것, 웹사이트 안전하게 캡처하기	제품 사실, 가격, 사양 또는 클라이언트 브랜드가 포함된 영화
references/footage-promos.md	제공된 영상으로 만드는 이벤트/클럽/아티스트 프로모: 클라이언트 요청 사항, 비트 그리드 음악, DJ 전환, 얼굴 프레이밍, 그래픽 기법	실제 영상으로 만드는 모든 프로모
templates/film/	완전하고 작동하는 2D 릴(15초, 키네틱 타이포그래피, 제품 카드, 카운터, 차트, CTA) + 렌더, 사운드 및 마무리 스크립트	모든 2D 영화를 이 템플릿에서 시작
templates/film-3d/	경로 추적기 + 예제 세트(스튜디오, 방, 집) + 작동하는 3D 영화 및 룩-개발 도구	3D 영화를 이 템플릿에서 시작
templates/footage/	영상 프로모 파이프라인: 비트 그리드의 샷 리스트(컷, 그리드, 분할, 스트립, 램프, 아이리스), 얼굴 프레이밍, 측정된 BPM/킥 위상/드롭, DJ 전환, 그래픽 툴킷(타입 마스크, 사람 뒤의 텍스트, 티커, 광학 센터링) + 예제	모든 영상 프로모를 이 템플릿에서 시작
scripts/setup_studio.ps1 / .sh	스튜디오 폴더를 만들고 모든 것을 설치합니다(다운로드 전에 물어봄)	처음 사용 시
scripts/new_film.mjs	템플릿을 <studio>/films/<name>에 복사합니다	새 영화를 만들 때마다

작업 흐름

다음 단계를 순서대로 따르십시오. 각 단계는 한 번 건너뛰면 클라이언트 수정이 발생했기 때문에 존재합니다.

1. 브리핑.
   • 지속 시간, 포맷, fps(기본 30, PAL 편집자의 경우 25), 언어, CTA 및 게시 위치를 파악하십시오.
   • 브랜드 파일(로고 SVG/PNG, 폰트, 색상, 기존 게시물)을 요청하십시오. 없으면 사이트에서 브랜드를 읽으십시오.
   • 상대가 "최선을 다해"라고 말해도 제품이나 주장을 변경하는 것은 확인하십시오. 페이싱과 스타일은 귀하가 결정합니다.
2. 리서치 및 사실 확인 (references/claims-and-sources.md).
   • 카피를 작성하기 전에 모든 숫자와 주장을 공식 출처에서 CLAIMS.md에 수집하십시오.
   • 두 출처가 충돌하면 숫자를 빼고 그 이유를 말하십시오. 광고에 잘못된 사양이 있는 것은 사양이 없는 것보다 나쁩니다.
3. 비트 그리드에 스토리보드 작성.
   • 지속 시간이 온전한 비트 수가 되도록 BPM을 선택하십시오(예: 30초 = 96 BPM에서 48비트; 15초 = 120 BPM에서 30비트).
   • 모든 장면 변경, 캡션 및 사운드 이벤트를 해당 그리드(bar(n, beat) / bt(b))에 배치하십시오.
   • 스토리보드를 짧은 표(비트 → 그림 → 텍스트 → 사운드)로 작성하고, 상대방이 연락 가능하다면 제작 전에 공유하십시오.
4. 스캐폴드. node <skill>/scripts/new_film.mjs <studio> <name> [film|film-3d|footage]를 실행한 다음, comp.html(2D), film.js + world.js + comp.html(3D), 또는 sources.json + edit.json + comp.html(footage; references/footage-promos.md 참조)을 편집하십시오.
5. 작은 루프로 제작. 낮은 품질로 연락 시트를 렌더링하고(node render.mjs beats 0.5,4,8,… 0.25 sheet) 살펴보십시오. 수정하고 다시 시트를 만드십시오. 한 프레임으로 모션을 판단하지 마십시오. 최종 렌더링 전에 전체 영화의 모든 비트(또는 반 비트)에 대해 시트를 만드십시오.
6. 감사 (node render.mjs audit 0.25). 텍스트가 제품이나 다른 텍스트와 겹치지 않아야 하며, 플랫폼 안전 영역 안에 있어야 합니다. 모든 적중을 수정하고, 감사와 논쟁하지 마십시오.
7. 사운드. python audio.py out/mix.wav out/stems를 실행한 다음, python check.py를 실행하십시오: 섹션별 라우드니스, 스펙트럼, 사이렌/글라이드 테스트, 클릭 확인.
8. 최종 렌더링. 먼저 물어보십시오 ("렌더 에티켓" 참조).
   • 2D 영화는 몇 분이 소요됩니다: node make.mjs frames + encode.
   • 3D 영화는 몇 시간이 소요됩니다: node render.mjs chunks + concat.
9. 마무리. node make.mjs finish는 라우드니스를 정규화하고(−14 LUFS, −1.5 dBTP), 영상에 먹싱하며(영상이 마스터 클럭이며, 절대 -shortest 사용 금지), 가벼운 -share 복사본을 작성합니다. 출력물에서 프레임 수, 지속 시간 및 라우드니스를 확인하십시오.
10. 최종 파일을 검토하십시오. comp을 검토하지 마십시오. 인코딩된 mp4에서 프레임을 추출하여(0.5초마다) 시트로 만들고 모든 프레임을 살펴보십시오. 그런 다음 짧은 메모(클라이언트가 사용하는 언어: 루마니아어/영어)와 함께 전달하십시오: 포함된 내용, 사실 출처, 클라이언트가 확인해야 할 사항.

렌더 에티켓 (상대방의 컴퓨터입니다)

3D 렌더링은 GPU를 한 시간 이상 100% 사용하게 만들어 머신이 느려집니다. 수백 개의 프레임 이미지를 쓰는 것도 Windows Defender가 모든 파일을 다시 검사하게 만듭니다. 누군가는 "그만해, 내 PC가 타고 있어"라고 외쳐야 했던 적이 있습니다. 따라서:

• 머신을 몇 분 이상 로드하는 작업 전에는, 어떤 작업인지, 얼마나 걸리는지, 어떻게 느껴질지 말하고, 승인을 기다리십시오. 다음을 제안하십시오:
  • 온화 모드 (NICE_MS=25 DUTY=.35): GPU 패스 사이에 일시 중지하여 데스크톱을 사용 가능하게 유지;
  • 최고 속도;
  • 나중에 / 밤새.
• render.mjs chunks를 선호하십시오 (1초 mp4 청크, 재개 가능) 모든 프레임을 PNG로 쓰는 것보다.
• 긴 렌더링은 분리된 프로세스로 실행하십시오. 채팅이 닫혀도 중간에 죽지 않도록 (Windows: Start-Process node -ArgumentList 'render.mjs','chunks' -WindowStyle Hidden).
• 중단하라는 말을 들으면 즉시 중단하십시오. 프로세스 트리를 종료하고(Windows: taskkill /T /F /PID …), 프로세스 목록으로 아무것도 남지 않았는지 확인하고, 여전히 머신을 사용 중인 것(예: Defender가 쓴 파일 검사)을 그들의 탓으로 돌리지 말고 말하십시오.
• 짧은 시트와 단일 테스트 프레임은 허가가 필요하지 않습니다. 몇 초면 끝납니다.

양보할 수 없는 사항 (각각 한 번씩 수정 비용이 발생했습니다)

• renderAt(t)는 순수 함수입니다.
  • 프레임 간 상태를 유지하지 않고, Math.random()을 사용하지 않으며(시드된 mulberry32 사용), CSS 전환이나 애니메이션, 타이머를 사용하지 않습니다.
  • node render.mjs verify는 프레임을 순서대로와 무작위로 렌더링하며, 일치해야 합니다.
• 모든 폰트 두께를 프레임 0 전에 로드하십시오 (document.fonts.load for each face used). 영화 중간에 처음 사용된 폰트는 한 프레임 동안 보이지 않게 됩니다.
• 두 개의 텍스트 블록이 겹치거나 텍스트가 제품을 덮지 않도록 하십시오.
  • 나가는 제목은 다음 제목이 그 자리를 차지하기 전에 사라져야 합니다.
  • 카운터는 순차적으로 교체됩니다(오래된 것이 나간 후 새로운 것이 들어옴); 두 개의 숫자가 서로 위에 겹쳐 있으면 깨져 보입니다.
• 캡션은 화면에 ≥ 1.5초 동안 유지되고, 각각 ≤ 7단어, 비트당 하나의 아이디어여야 합니다. 프레임 0을 읽을 수 있는 썸네일로 만드십시오.
• 숫자, 고객, 리뷰 또는 결과를 절대 만들어 내지 마십시오. 가격은 화면에 날짜가 표시된 증거와 함께, 그리고 클라이언트의 승인을 받은 경우에만 표시하십시오.
• 달리 요청하지 않는 한 사운드는 진지해야 합니다. 기술 제품에 장난감 마림바나 종소리를 사용하지 말고, 연속적인 톤 글라이드를 사용하지 마십시오: 한 릴의 스파크 사운드는 "종말의 사이렌"이라고 불렸습니다.
• 실제 UI와 실제 자산을 사용하십시오 (Playwright로 높은 DPR에서 클라이언트의 자체 사이트를 크롭). 클라이언트의 UI나 로고를 손으로 다시 그리지 마십시오. 실제 사이트에서 구매, 제출 또는 보내기를 클릭하지 마십시오.