티저 비디오
티저는 하나의 기능을 몇 개의 비트(각 비트는 하나의 명확한 초점을 가짐)로 보여주며, 음악에 맞춰 설정됩니다. 모든 화면은 제품의 실제 스크린샷입니다. 움직임은 카메라, 해당 스크린샷에서 잘라낸 행이 각자의 위치에 떨어지는 것, 그리고 음악에 맞춰 떨어지는 컷에서 비롯됩니다. 전체 비디오는 코드(하나의 HTML 페이지와 하나의 타이밍 테이블, HyperFrames로 렌더링)이므로 새 캡처, 변경된 캡션 또는 다른 음악 클립은 다시 실행하면 됩니다.
사용자는 취향을 지시하고 여러 번 반복합니다. 전체 렌더링 전에 연락처 시트를 보여주고, 모든 렌더링을 보관하며, 변경된 사항과 그 이유를 기록합니다. references/taste.md의 기본값부터 시작하십시오. 해당 기본값은 첫 번째 검토 라운드에서 수렴된 내용입니다.
설정
- Node 22+ 및 npx(HyperFrames는
npx [email protected]를 통해 실행됨, 설치할 것 없음), PATH에 ffmpeg(HyperFrames는 스냅샷 및 렌더링에도 필요함),uv(Python 도구는 자체 종속성을 선언함), 캡처를 위해 제품 프로젝트에 Chromium이 있는 Playwright. 렌더링은 CDN에서 GSAP 및 Inter 글꼴을 로드하므로 네트워크 연결이 필요합니다. SK=<이 스킬의 디렉토리>/scripts.- 저장소의 추적된 파일 외부 폴더(gitignored된
.logs/<video>/또는 임시 폴더)에서 작업:
<work>/
assets/<theme>/ 캡처 패스당 캡처 및 boxes.json
capture/ 이 제품에 대한 캡처 스크립트
video/ index.html 및 timeline.js (예제에서 복사); assets/는 캡처, 브랜드 아이콘, 음악을 보관
NOTES.md 모든 버전과 변경 이유, 재빌드 명령
1. 브리핑
짧은 교환 한 번으로 기본값을 제공하며 확인:
- 길이: 별도 요청이 없으면 10초. 하드 캡 미만으로, 비트를 자르고, 절대 속도를 높이지 마십시오.
- 비트: 3개 또는 4개, 각각 한 화면에서 하나의 작업(URL 입력, 찾은 내용 검토, 결과 확인, 브랜드). 각 비트는 숫자 없이 두세 단어의 캡션을 얻습니다.
- 한눈에 읽히는 예제 데이터: 잘 알려진 사이트여서 결과(경쟁사 이름, 파비콘)를 인식할 수 있습니다.
- 모양: 제품 자체 테마 토큰(티저에 적합한 기본값은 다크 모드) 및 실제 브랜드 아이콘. 직접 그린 마크가 아닌 라이브 웹사이트에서 가져옵니다.
- 음악: 파일, 그리고 10초면 충분한지 여부(5단계 참조).
- 각 화면에 가장 최신 UI가 있는 브랜치 또는 워크트리. 캡처하기 전에 원격보다 뒤쳐져 있는지 확인하십시오.
2. 캡처
$SK/capture.mjs(narrated-video와 동일한 헬퍼)를 사용하여 1440x900, 2x의 실제 스크린샷: 입력된 모든 항목에 대한 타이핑 프레임, 카메라가 아래로 패닝되는 항목에 대한 긴 캡처(2400px), 장면이 프레임을 구성하거나, 행을 자르거나, 클릭하는 모든 요소에 대한 측정된 상자. 다크 모드의 경우 cap.page()에 { colorScheme: 'dark' }를 전달합니다. 절대 UI를 그리거나 픽셀을 편집하지 마십시오. 세부 사항(정지 애니메이션 프레임 및 요청 비용 없이 로딩 상태 캡처 포함): references/capture.md. 사용하기 전에 모든 캡처를 확인하십시오.
3. 구성
examples/openseo-ai-visibility/video(index.html, timeline.js)를 작업 폴더에 복사하고, 캡처, 브랜드 아이콘 및 음악을 video/assets/에 넣고 timeline.js를 다시 작성하십시오: 타이밍 테이블, 캡션, 팔레트, 캡처 경로 및 높이, 측정된 상자, 각 장면의 카메라 키 및 포인터. index.html은 해당 파일에서 모든 장면을 빌드합니다. 행은 측정된 상자를 사용하여 캡처에서 잘라냅니다. 작동 방식과 중요한 숫자: references/composition.md.
4. 초안 및 확인
cd video
npx --yes [email protected] lint # 오류 0개 보고해야 함
npx --yes [email protected] snapshot --at 0,1.2,2.4,2.6,3.4,4.4,6.0,8.2,9.5 --no-end # snapshots/에 저장
스냅샷은 몇 초 밖에 걸리지 않으므로 초안 렌더링 대신 사용하십시오. 모든 장면 시작, 클릭, 캡션 진입 및 모든 디졸브 중간의 스냅샷을 찍고 확인하십시오(각 실행은 연락처 시트도 작성): 프레임 당 하나의 초점과 중앙 정렬, 초점 대상에서 명확한 캡션, 페이지가 평평할 때 빈 페이지 가장자리 없음, 공개 종료 시 여전히 누락된 행 없음. 그런 다음 각 장면의 전체 해상도 프레임에서 텍스트가 선명한지 확인하십시오.
5. 음악
uv run $SK/beats.py song.mp3 # 템포, 초당 음량, 모든 비트
uv run $SK/beats.py song.mp3 --window 51.9 10 # 비디오 시간 내 후보 클립의 비트
클립을 선택하고, 시작 시간을 index.html의 <audio> 요소에 쓰고 비트 시간을 타이밍 테이블에 쓴 다음, 컷을 해당 비트로 이동하십시오: 드롭의 주요 클릭, 비트의 각 장면 변경, 가장 강한 비트의 로고. 클립 선택 및 매핑: references/music-sync.md.
6. 렌더링 및 확인
npx --yes [email protected] render -o renders/<video>-vN.mp4 --fps 60 --crf 14 \
--video-frame-format png --experimental-fast-capture=false # 10초 비디오에 약 15초
uv run $SK/verify-sync.py renders/<video>-vN.mp4 <계획된 비트 시간...> # 모든 비트가 프레임 내에 있어야 함; 그렇지 않으면 종료 코드 1
uv run $SK/sheet.py renders/<video>-vN.mp4 renders/sheet-vN.png <시간...>
렌더링 이름을 버전별로 지정하고 모두 보관하십시오. 사용자가 비교합니다. 공유용 스틸(소셜 이미지, 썸네일)은 선택한 순간의 4K 스냅샷입니다: npx --yes [email protected] snapshot --at 7.3 --no-end --zoom 0,0,1920,1080 --zoom-scale 2 -o stills는 3840x2160 PNG를 작성합니다.
7. 검토 및 반복
mp4 경로(및 여는 방법), 비트 및 해당 시간, 요청과 다른 점을 제공하십시오. 각 라운드를 NOTES.md에 기록하십시오. 작업 예제의 첫 번째 버전은 7라운드가 걸렸습니다. 각 라운드에서 변경된 사항은 examples/openseo-ai-visibility/NOTES.md에 있습니다.
엄격한 규칙
- 실제 화면만 사용합니다. 행 공개는 실제 행이 위에 착지하는 동안 테이블 자체 배경(캡처에서 샘플링)으로 행을 잠시 덮을 수 있습니다. 일단 착지하면 프레임은 캡처입니다.
- 렌더링하기 전에 캡처에서 비밀 및 개인 데이터(키, 이메일, 다른 사람 이름, localhost URL)를 확인하십시오.
- 음악과 캡처는 사용자의 컴퓨터에 남아 있습니다. 요청 없이는 아무것도 게시하지 마십시오.
- 제품을 빌드하거나 미리보기 위해 생성된 추적 파일을 저장소에서 복원하십시오.
가장 많은 시간을 낭비하는 실수는 references/gotchas.md에 있습니다.