smasikurr/RemotionMaster

Product Launch

이 플레이북 사용 방법. 이는 규칙이 아닌 레시피입니다. 아래의 모든 형식, 길이, 템포 및 공식은 기본값이며, 사용자가 요청하는 것이 우선합니다. 질문으로 시작하지 마세요. 기본값을 사용하여 제작하고, 첫 번째 렌더링을 공유할 때 선택한 기본값을 한 줄로 언급하세요(영상 자체와 같이 필수적인 것이 누락된 경우에만 질문). 첫 번째 렌더링이 제안서이므로 먼저 승인받을 계획은 없습니다. 사용자가 먼저 샷을 보고 싶다고 요청할 때만 스토리보드를 작성합니다. 방법에서 언급하는 계획 파일(BRIEF.md, PLAN.md 등)은 작업 메모입니다. 도움이 될 때만 작성하고, 사용자를 위한 단계로 여기지 마세요.

제품이 입력되면 세련된 런칭 비디오가 출력됩니다. SaaS 팀이 X에 게시하는 종류입니다. 문제를 명명하는 훅, 드롭에 맞춰지는 제품명, 실제 인터페이스에서 보여지는 세 가지 기능, 증거, 깔끔한 엔드 카드로 구성됩니다. 음악 기반, 보통 나래이션 없음, 20~60초.

참고 제작물: Moritz의 Notion 런칭 데모(46초, 16:9, 나래이션 없음, 120 BPM). 9개 프레임: 어두운 배경에 흩어진 도구 훅, 드롭에 로고와 회전 헤드라인, 부동 창에 실제 히어로 비디오, 실제 Notion UI로 제작된 세 가지 기능 프레임(캡처, 질문, 에이전트), 사용 사례 롤, 통계가 포함된 로고 월, CTA 잠금 화면. 계획은 references/example-notion.md에 있습니다. 그 기준에 맞추세요.

방법은 고정되어 있지만 도구는 아닙니다. 프로젝트에 이미 비디오 도구가 있으면 그것을 사용하세요. 그렇지 않으면 Hyperframes 프로젝트(npx hyperframes init)를 시작하고 template/hyperframes/를 시작 컴포지션으로 복사하세요.

<playbook>은 이 폴더(get_playbook이 반환한 로컬 경로)를 의미합니다.

입력과 출력

• 입력: 런칭 대상(URL, 앱 자체, 스크린샷, 녹화, 브리핑 또는 붙여넣은 스크립트), 대상 사용자, 게시 위치. 선택 사항: 브랜드 파일, 나래이션 스크립트, 음악 트랙.
• 출력: 실제 제품 UI, 키네틱 타이포그래피, 하나의 비트 그리드에 맞춰진 음악 및 음향 효과가 포함된 20~60초 mp4(기본 16:9, 요청 시 9:16 또는 1:1), FrameJam에서 검토 및 승인됨.

기본값 (사용자 요청이 이를 재정의함)

요청과 파일에서 이를 파악하세요. 언급된 것이 없으면 기본값을 사용하고 계속 진행하세요. 필수적인 것이 누락된 경우에만 질문하세요.

• 한 줄 약속. 시청자가 기억해야 할 것. 다른 모든 것은 이에 대한 증거입니다.
• 길이 및 형식: X 피드 3045초 16:9(기본값); 랜딩 히어로 3045초 16:9, 음소거 우선; 릴스 9:16 ≤ 30초.
• 사운드: 음악 전용(기본값, 자동 재생 시 음소거로 재생되므로 타이포그래피가 스토리를 전달함) 또는 나래이션 + 음악.
• 실제 UI 소스: 실행 중인 앱(녹화), 웹사이트(스크린샷 및 히어로 비디오 캡처) 또는 사용자가 제공한 파일. 보여줄 실제 제품이 없으면 말하고, 인터페이스를 만들지 마세요.
• 스타일: 이 비디오에 대해 선택된 스타일 사용(있는 경우, wait_for_pick 또는 사용자가 이름을 지정한 경우 get_preset에서 가져옴). 사용자가 FrameJam 스타일을 선택하면 전체 룩(팔레트, 타이포그래피, 모션 느낌, 전환)이 설정됩니다. 스타일 없음: 제품 자체 브랜드(색상, 글꼴, UI 표면)에서 룩을 파생시킵니다.
• 사실: 통계, 고객 로고 및 주장은 제품 자체 사이트 또는 사용자로부터만 가져옵니다. 허구의 숫자는 없습니다.
• 음악: 기본적으로 포함된 무료 스크립트(scripts/launch_bed.py), 사용자가 소유한 트랙 또는 라이선스가 있는 라이브러리 트랙. 생성 음악 서비스는 유료이므로 사용하기 전에 중단하고 질문하세요.

다른 도구로 만든 기존 프로젝트: 해당 도구를 유지하세요. 방법(비트 그리드, 스토리보드, 창 속 실제 UI, 단계적 공개, 검증, FrameJam 루프)과 스크립트(launch_bed.py, sheet.sh)는 모든 도구에서 작동합니다.

언급된 것이 없을 때: 음악 전용, 16:9, 약 40초, 브랜드의 룩. 첫 번째 렌더링을 공유할 때 사용한 기본값을 명시하세요.

워크플로우

1. 실제 제품 수집

한 줄도 작성하기 전에 자료를 수집하세요. 자세한 내용은 references/assets.md에 있습니다.

• 앱: 각 기능의 짧고 깔끔한 테이크를 녹화합니다(테이크당 하나의 동작, 2880px 이상 너비, 알림 없음, 현실적인 데모 데이터). 이벤트 타이밍(클릭이 발생하는 시점, 결과가 나타나는 시점)을 유지하세요.
• 웹사이트: 히어로 비디오, 전체 페이지 및 섹션 스크린샷(2배), 로고(SVG), 글꼴, 정확한 헤드라인, 통계 및 고객 로고를 저장하세요. Hyperframes 사용자는 npx hyperframes capture <url> -o capture를 실행할 수 있습니다.
• ASSETS.md 작성: 파일당 한 줄로 표시 내용, 크기, 비디오의 경우 주요 순간(초)을 기록합니다.
• 브랜드 진실: 색상(잉크, 캔버스, 하나의 악센트), 디스플레이 및 본문 글꼴, UI 모양(반경, 그림자, 크롬).

2. 스토리 및 비트 그리드

references/story.md를 읽으세요. 그런 다음 STORYBOARD.md를 작성하세요:

• 하나의 아크(문제 → 플랫폼, 데모 루프, 전후, 기능 캐스케이드)를 선택하세요. 약속을 한 줄로 작성하세요.
• 6~10개의 프레임. 각 프레임은 하나의 역할(훅, 제품 소개, 기능, 이점, 증거, CTA)을 가집니다. 기능은 실제 표면에서 짧은 시퀀스(입력 → 동작 → 결과)로 표시되며, 정적 스크린샷이 아닙니다.
• AI 에이전트 및 어시스턴트: 하나의 실제 요청을 처음부터 끝까지 보여주세요. 입력에 입력되고 전송되며, 메시지가 되고, 에이전트의 단계가 하나씩 나타나며(이전 단계는 희미해짐), 결과는 정확한 사실과 체크 표시가 있는 카드로 표시되며, 프레임은 잠금 화면 전에 결과에 머뭅니다. 요청과 결과는 구체적(이름, 시간, 개수)이어야 하며, 플레이스홀더 텍스트는 안 됩니다.
• 훅은 3~4초이며 음소거 상태에서 작동합니다. 시청자의 고통이나 욕구를 그들의 언어로 표현하며, "X는 ...하는 플랫폼입니다"가 아닙니다.
• 비트 그리드 우선. 템포를 선택하세요(110~128 BPM, 120 BPM에서 비트는 0.5초, 마디는 2초). 모든 프레임은 다운비트에서 시작하여 전체 마디 동안 지속됩니다. 드롭을 표시하세요(보통 제품명 및 증거 섹션). 각 프레임의 모든 공개는 비트에 맞춰집니다.
• 나래이션 포함: SCRIPT.md를 짧은 큐(프레임당 6~20단어)로 작성하고 나래이션이 프레임 길이를 설정하게 하세요. 음악은 여전히 그리드 아래에 따릅니다.
• 상단에 ## Video direction 블록을 한 번 작성하세요: 팔레트 역할, 타이포그래피 역할, 창 진입 방식, 모션 규칙, 어두운 "임팩트" 프레임, 절대 나타나지 않는 것.

그런 다음 제작하세요. 첫 번째 렌더링이 제안서입니다. 사용자가 먼저 프레임을 보고 싶어하면 스케치하고 FrameJam에서 스토리보드로 검토하세요: open_review에 panelsDir 사용(프레임당 하나의 이미지, 01-hook.png... 형식), 그런 다음 wait_for_feedback.

3. 샷 디자인

각 프레임에 대해 비트 그리드에 대한 시간 코딩된 샷 목록을 작성하세요(references/shots.md): Scene 1 (0.0–0.5s): … 화면에 무엇이, 어디에 있는지, 어떻게 움직이는지 설명. 규칙:

• t=0에서는 첫 번째 것만 보여주세요. 다른 모든 것은 비트(또는 말하는 단어)에 도착합니다. 처음 1/4에 전체 프레임을 덤프하고 그대로 두지 마세요.
• 실제 UI는 부동 제품 창(브랜드 반경, 가는 테두리, 부드러운 계층형 그림자)에 있으며, 진입 시 3D로 안정됩니다. UI 텍스트를 단어 중간에 자르지 마세요. 움직여야 하는 하나의 구성 요소만 다시 구축하세요(예: 입력하는 검색 상자).
• 프레임당 하나의 악센트 색상, 헤드라인당 하나의 강조 단어.
• 모든 프레임은 읽기 위해 멈춘 상태로 끝나세요. 정지 상태가 게으른 호흡이나 떠다니는 카메라보다 낫습니다.
• 프레임 간 전환: 기본적으로 비트에 하드 컷, 섹션 변경 시 줌-스루, 기능 연속 시 푸시-슬라이드.

4. 음악 및 사운드

references/music.md를 읽으세요. 기본 경로(무료): 스토리보드에서 cues.json을 작성하고(마디로 구분된 섹션, 드롭, 모든 슬램, 팝, 클릭, 타이핑 및 창 진입에 대한 음향 효과), 그런 다음 uv run <playbook>/scripts/launch_bed.py cues.json --out assets/music/bed.wav(또는 python3 with numpy, scipy and soundfile)를 실행하세요. 음향 효과는 동일한 큐 시트에서 제공되므로 컷에 정확히 맞춰집니다. 사용자가 트랙을 가져오는 경우: 템포를 측정하고, 그에 맞춰 그리드를 자르고, 느린 인트로보다는 가장 강력한 섹션에서 트랙을 시작하세요.

5. 제작

프로젝트의 도구에서 프레임별로 제작하세요. Hyperframes 참고 사항(및 우리가 겪은 함정)은 references/hyperframes.md에 있습니다. 스타터는 template/hyperframes/입니다.

• 프레임당 하나의 컴포지션, 또는 짧은 작품의 경우 프레임당 하나의 레이어가 있는 하나의 파일을 사용하세요. 프레임 로컬 시간을 유지하세요.
• 명시적인 from-state(seek-safe)로 애니메이션을 적용하고, 긴 테일 이지(power3/expo.out)를 사용하며, 바운스, 무한 루프, 무작위성은 없습니다.
• 제품 비디오: 각 <video>에 id를 부여하고, 카메라 이동을 위해 비디오 요소 자체가 아닌 래퍼 div를 이동하세요.
• 병렬 서브 에이전트를 사용할 수 있는 경우 각 프레임에 하나씩 할당하세요: 해당 스토리보드 블록, ## Video direction, 사용하는 자산 라인, "자신의 파일만 편집". 그렇지 않으면 직접 순서대로 제작하세요.

6. 확인, 렌더링, 검토

• 도구에서 린트/확인한 다음 버전당 새 파일로 렌더링하세요(renders/v1.mp4, v2.mp4…).
• bash <playbook>/scripts/sheet.sh renders/v1.mp4는 2fps 콘택트 시트를 만듭니다. 읽어보세요. 모든 프레임 중간점과 모든 컷의 양쪽을 살펴보세요. 확인: 앞부분에 집중되지 않음, 텍스트 잘림 없음, 캡션 밴드 아래에 있지 않음, 이음새에 팝 없음, 드롭이 이름과 함께 떨어짐, 엔드 카드가 ≥ 1.5초 동안 유지됨.
• ffmpeg -i renders/v1.mp4 -vf freezedetect=n=0.003:d=2 -f null -로 정지 구간을 찾습니다. 계획된 홀드 자리에서만 정지가 허용됩니다.
• FrameJam에서 검토: open_review에 videoPath = 렌더링(절대 경로)을 사용하고, 내장 브라우저에서 URL을 열고, wait_for_feedback. 각 노트를 타임스탬프로 해당 프레임에 매핑하고, 수정하고, v2를 렌더링하고, 다시 확인한 다음, add_version으로 한 줄 노트를 추가하고 다시 기다립니다. 승인될 때까지 반복합니다.
• 최종 mp4를 전달하세요(X: H.264, ≤ 2:20, ≤ 512 MB)와 함께 지속 시간 및 프레임 목록을 포함하세요.

품질 기준

• 실제 제품, 진실되게: 모든 UI 샷은 실제 녹화 또는 스크린샷입니다. 카피, 통계 및 로고는 제품 자체 출처에서 가져옵니다. 타사 로고는 제품 자체에서 표시하는 경우에만(통합, 고객) 사용합니다.
• 약속은 프레임 2까지 도착합니다. 훅은 시청자의 고통이나 욕구를 말하며, 이름은 드롭에 도착합니다.
• 모든 공개는 비트(또는 말하는 단어)에 맞춰지며, 음악, 음향 효과 및 컷은 하나의 그리드를 공유합니다.
• 한눈에 읽기 가능: 헤드라인당 1~7단어, 1080p에서 ≥ 64px, 프레임당 하나의 초점.
• 프리미엄 모션: 부드러운 안정, 깊이가 있는 창, 속도 일치 이음새; 바운스, 스크린세이버 부유, 제품을 대신하는 일반 스톡 모양 없음.
• 음소거 상태에서 작동: 타이포그래피와 UI만으로 스토리를 읽을 수 있습니다.
• 스스로 확인 (콘택트 시트 + 컷 검사) 매 FrameJam 라운드 전에.

이 플레이북의 파일

• references/story.md: 아크, 프레임 역할, 훅 유형, 각 역할에 대한 입증된 라인 형태, VO 규칙.
• references/shots.md: 런칭 프레임의 샷 형태, 레이아웃 및 모션 규칙, 이음새, 작업된 샷 목록.
• references/assets.md: 앱 녹화, 사이트 캡처, 자산 목록, 권리.
• references/music.md: 비트 그리드, cues.json 형식, 자신의 트랙 사용.
• references/hyperframes.md: Hyperframes에서 새로 시작, 제품 창, 비디오 및 오디오, 함정.
• references/example-notion.md: Notion 런칭 데모의 프레임별 계획.
• scripts/launch_bed.py: 큐 시트에서 무료 로컬 음악 배경 및 음향 효과.
• scripts/sheet.sh: 모든 렌더링의 콘택트 시트.
• template/hyperframes/: 시작 컴포지션(비트 그리드 도우미, 제품 창, 키네틱 라인, 칩, CTA 카드).