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 가중치(~350MB)와 whisper small.en(~480MB)이 첫 번째 음성 실행 시~/.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를 문자 그대로 기록합니다. 글꼴 모음/두께/자간에 대한 계산된 스타일과 배경/텍스트/강조 색상에 대한 샘블 픽셀 색상을 읽습니다(CSS 변수는 오래될 수 있음). 로고 SVG와 모든 이미지를
launch-videos/scenes/<name>/assets/에 저장합니다. 라이선스가 재배포를 허용하는 경우에만 사이트 글꼴을 사용하고, 그렇지 않으면 가장 가까운 번들 글꼴(Inter, JetBrains Mono, Space Grotesk)을 사용합니다. 메트릭스, 고객, 통합 또는 UI를 절대 임의로 만들지 마십시오. 계획/미리보기로 표시된 것은 생략하거나 레이블을 붙이십시오. 실제 UI 예제를 얻을 수 없으면 중단하고 그렇게 말하십시오. 씬 상단의 주석에 소스 URL과 날짜를 넣으십시오. - 스크립트, 그런 다음 스토리보드. 각 샷에 대해 사이트의 카피에서 가져온 한두 줄의 짧은 문장; 총 20
40초.6개의 샷, 각각 하나의 아이디어: 훅(2초 이내에 화면에 제품 또는 헤드라인) → 첫 번째 사용 순간 → 작동 중인 제품(사이트 자체 예제에서 HTML로 재구성된 실제 UI, 스크린샷 절대 안 됨) → 두 번째 기능 → 3개의 기둥 또는 작동 방식 → CTA와 로고. 차분한 브랜드:say를 사용하여 발화 형태가 다른 경우(점, 약어:say: 'Build A.I. agents'). 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(키, 샷, 텍스트/발화, 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 미만.- 동기화: 최종 MP4를 faster-whisper small.en 단어 타임스탬프로 전사합니다. 각 라인의 첫 번째 단어가 로그에 인쇄된 타임라인의 약 0.2초 이내여야 합니다. 키워드는 시각적 비트에 맞춰집니다.
- 연속성: 작업자 경계를 넘어 프레임 비교(프레임 수 / 작업자 수).
- 전달. MP4 경로를 전달합니다. 이전 컷을 절대 덮어쓰지 마십시오(
mv -n또는 새--out사용). 음성과 음악이 합성되었으며 귀로 확인되지 않았다고 명확히 말하십시오. "한 번의 프롬프트로 만들어짐"과 같은 주장을 피하는 게시물 카피를 제공하십시오. 유료 음성(ElevenLabs, OpenAI, Google)은 패키지 내부의lib/tts.py에서 교체 가능합니다. 사용자가 더 인간적인 읽기를 원하는 경우에만 언급하십시오.