Launch video
렌더러: launch-video-skills npm 패키지. 전체 장면 계약: https://github.com/anudeepadi/launch-video-skills#scene-contract
npx launch-video-skills setup: 머신당 한 번 실행 (헤드리스 Chromium + Python 음성 패키지). Node 18+, Python 3.10+, ffmpeg 필요. Kokoro 가중치(~350 MB)와 whisper small.en(~480 MB)은 첫 음성 실행 시~/.cache/lvk에 다운로드됩니다.npx launch-video-skills new <name>:launch-videos/scenes/<name>/index.html파일과 함께launch-videos/kit/디렉토리를 생성합니다.npx launch-video-skills render <scene.html> [flags]:./out/디렉토리에 결과를 씁니다.- Chromium 다운로드가 멈출 경우 →
export LVK_CHROME=/path/to/chrome-headless-shell(로컬 빌드 사용). - macOS에서 python.org Python이 SSL 오류를 발생시킬 경우 →
export SSL_CERT_FILE=$(python3 -c 'import certifi;print(certifi.where())').
좋은 런칭 비디오와 "AI 쓰레기"를 구분하는 방법은 references/craft.md에 있습니다. 스토리보드를 만들기 전에 읽으십시오.
단계
- 실제 제품에서 브랜드와 사실 수집. Playwright로 사이트를 가져옵니다. 헤드라인, 부제목, 기능 이름, 사이트 자체 예제 콘텐츠(데모 스레드, 프롬프트, 코드, 이슈 목록) 및 CTA를 그대로 기록합니다. 글꼴 모음/두께/자간 및 배경/텍스트/강조 색상의 픽셀 샘플을 computed 스타일로 읽습니다(CSS 변수는 오래될 수 있음). 로고 SVG와 이미지를
launch-videos/scenes/<name>/assets/에 저장합니다. 사이트의 글꼴이 재배포를 허용하는 경우에만 사용하고, 그렇지 않으면 가장 가까운 번들 글꼴(Inter, JetBrains Mono, Space Grotesk)을 사용합니다. 메트릭, 고객, 통합 또는 UI를 절대 허구로 만들지 마십시오. 계획됨/미리보기로 표시된 항목은 생략하거나 레이블을 붙이십시오. 실제 UI 예제를 얻을 수 없으면 중단하고 그 사실을 알리십시오. 장면 상단에 주석으로 소스 URL과 날짜를 추가합니다. - 스크립트 작성 후 스토리보드 제작. 샷당 한두 줄의 짧은 대사로, 사이트 카피에서 가져오며, 총 20
40초 분량입니다. 말할 때 철자가 다른 경우(점, 약어:6개의 샷, 각각 하나의 아이디어: 후크(2초 내에 제품 또는 헤드라인 표시) → 첫 사용 순간 → 실제 작동 중인 제품(스크린샷이 아닌 사이트 자체 예제를 HTML로 재구성한 실제 UI) → 두 번째 기능 → 3가지 핵심 요소 또는 작동 방식 → CTA와 로고. 차분한 브랜드:say: 'Build A.I. agents')say를 사용합니다. 5music.style: 'ambient', 부드러운 SFX(0.2~0.6). 개발 도구:'pulse'와 강조 효과. 음성은 선택 사항이며, 음악만 있는 경우도 X에서 흔합니다. launch-videos/scenes/<name>/index.html작성 (../../kit/kit.css및kit.js참조). 스캐폴드된 템플릿에서 시작합니다. 샷을data-shot="id"로 표시하고 하드코딩된--in/--out을 사용하지 마십시오. 음성 라인은SCENE.voice.lines에 배치합니다(키, 샷, 텍스트/say, at/after,pause비트). 비트를data-on="key",data-on="key:word",data-edge="e"로 음성에 고정합니다. SCENE 정의 후K.layout()을 호출하고K.at/K.end/K.shot에서 JS 비트를 파생합니다: 타이핑 속도 = 텍스트 길이 / 음성 지속 시간, 키워드에서 커서 클릭, 동일한 상수에서 타자음 신호.onFrame(t)은 t에서 순수 함수여야 합니다. JS 변환은 CSS 애니메이션 클래스가 없는 래퍼에 적용합니다. 큰filter: blur,backdrop-filter또는 전체 화면 블렌드 모드는 사용하지 마십시오.- 검토 루프.
npx launch-video-skills render launch-videos/scenes/<name>/index.html --sheet 1실행. 모든<- ASR heard:라인은 오발음 가능성이 있으므로say로 다시 표기하고 재확인합니다(whisper가 올바른 오디오를 잘못 들을 수도 있으므로 사람이 들을 수 있도록 표시). 시트 PNG를 보고: 텍스트가 복잡한 이미지 위에 있는지, 작은 텍스트의 가독성, 빈 프레임, 전환 중 충돌, 샷이 끝나기 전에 타이핑이 완료되는지, 구문 강조가 깨졌는지 확인합니다.--stills t1,t2로 전체 해상도 확인을 수행합니다. 한 번에 수정하려고 하지 말고 취향 노트("너무 빠름", "무슨 일이 일어났는지 불분명")로 반복합니다. - 렌더링 및 검증.
npx launch-video-skills render launch-videos/scenes/<name>/index.html --workers 4실행. 그 다음:ffprobe: h264 + aac, 예상 지속 시간 확인.volumedetect: 평균 약 -19 ~ -17 dB, 최대 -1 dB 미만.- 싱크: faster-whisper small.en 단어 타임스탬프로 최종 MP4를 전사합니다. 각 라인의 첫 번째 단어가 로그에 출력된 타임라인과 약 0.2초 이내여야 합니다. 키워드는 시각적 비트에 맞아야 합니다.
- 연속성: 작업자 경계에서 프레임을 비교합니다(프레임 수 / 작업자 수).
- 전달. MP4 경로를 전달합니다. 이전 컷을 절대 덮어쓰지 마십시오(
mv -n또는 새--out사용). 음성과 음악이 합성된 것이며 귀로 확인되지 않았다고 솔직히 말합니다. "한 번의 프롬프트로 제작"과 같은 주장을 피하는 게시물 카피를 제공합니다. 유료 음성(ElevenLabs, OpenAI, Google)은 패키지 내lib/tts.py에서 교체 가능하며, 사용자가 더 자연스러운 읽기를 원할 때만 언급합니다.