Sachin-pro-dev/PITCHFRAME-push-to-prod

코드 생성 및 렌더링

당신은 브리프를 plan.json으로 변환하고 이를 렌더링합니다. 참조 프로젝트는 이미 런치 비디오 문법을 구현하고 있습니다 — 당신은 비디오를 처음부터 작성하는 것이 아니라 데이터를 전달하는 것입니다.

참조 프로젝트의 완성도 수준은 이 도구가 생성하는 모든 비디오의 완성도 수준입니다. 따라서 강력한 기본 규칙은: plan.json을 작성하고, 다른 것은 변경하지 않는 것입니다. 한 번 실행에 추가한 모든 맞춤형 애니메이션 코드는 다음 비디오에 도달하지 못하는 완성도이며, 렌더링이 중단될 새로운 방법입니다.

파일 맵

pitchframe/
├── plan.json               ← 장면 계획. 이것이 비디오입니다.
├── palette.json            ← 추출된 색상. 데이터이며, 설명이 아닙니다.
├── public/assets/*.png     ← 캡처된 스크린샷.
├── scripts/
│   ├── extract-palette.mjs ← tailwind → CSS 변수 → 라이브 URL
│   ├── apply-palette.mjs   ← palette.json에서 src/theme.ts를 작성합니다.
│   └── capture.mjs         ← dev 서버 + Playwright 캡처
├── src/
│   ├── Root.tsx            ← LaunchVideo 구성을 등록합니다.
│   ├── LaunchVideo.tsx     ← beat를 Sequence에 매핑합니다. 크로스 디졸브를 소유합니다.
│   ├── theme.ts            ← 생성됨. 모든 색상이 여기서 결정됩니다.
│   ├── lib/
│   │   ├── types.ts        ← 계약서(plan contract)
│   │   └── motion.ts       ← 이징, 페이드, 클릭 펄스, 홀드 드리프트
│   ├── components/         ← 배경, 커서, 포커스 오버레이, 줌, 패널, …
│   └── scenes/
│       ├── TypographyBeat.tsx
│       ├── InteractionBeat.tsx   ← 핵심 순간
│       ├── UIBeat.tsx
│       └── CTABeat.tsx
└── output.mp4

계획 작성하기

구조와 스키마를 위해 pitchframe-launch-video를 로드하세요. 간략히 설명하면:

• 네 부분 — 설정, 핵심 장면, 마무리, CTA. 항상 이 순서대로.
• 정확히 하나의 interaction beat이며, 전체 프레임의 최소 30% 를 차지합니다.
• 지속 시간은 기본값이 아닌 브리프의 thesis_weight에서 비롯됩니다.
• 비판 검토가 비디오와 주장을 확인할 수 있도록 video_thesis 및 hero_moment를 계획에 복사하세요.

렌더링 전에 산술을 정확히 하세요

실패한 렌더링은 2분이 소요됩니다. beat가 어긋난 계획은 다시 렌더링하고 알아차리는 데 시간이 추가로 필요합니다. 매번 수동으로 확인하세요:

• beat가 연속적 — 각 frames[0]은 이전 frames[1]과 동일합니다.
• 첫 번째 beat는 0에서 시작합니다. 마지막 beat는 정확히 total_frames에서 끝납니다.
• total_frames === duration_seconds * fps.
• 45프레임 미만의 타이포그래피 beat 없음.
• Interaction beat가 total_frames의 ≥ 30%를 차지합니다.

좌표에 대해 추측하지 말고 추론하세요

target_element.coordinates 및 zoom_target은 스크린샷의 백분율입니다. 이는 흥미로운 픽셀이 있는 위치에 대한 주장이며, 10% 벗어난 초점은 빈 크롬에 히어로 샷을 집중시킵니다.

스크린샷을 열고, 요소를 찾아 백분율로 변환하고, 그 결과를 beat가 표시해야 하는 내용과 대조하여 확인하세요. 작업의 결과가 대상 외 다른 곳에서 발생하는 경우 — 드래그의 목적지, 다른 곳에서 업데이트되는 필드 — zoom_target을 커서가 닿은 대상이 아닌 결과에 맞추세요.

색상: 계획에도, 컴포넌트에도 절대 넣지 않음

theme.ts는 palette.json에서 apply-palette.mjs에 의해 생성됩니다. 색상이 기록되는 유일한 곳입니다.

node pitchframe/scripts/extract-palette.mjs      # → palette.json
node pitchframe/scripts/apply-palette.mjs        # → src/theme.ts

다음과 같은 규칙이 따릅니다:

• plan.json에 절대 색상을 넣지 마세요. 계획은 어떤 단어가 강조되는지 말합니다. 테마는 강조 색상이 무엇인지 말합니다.
• 컴포넌트에 색상 리터럴을 절대 넣지 마세요. 테마가 노출하지 않는 음영이 필요하면, 생성기에 파생 토큰을 추가하여 모든 향후 비디오도 이를 얻도록 하세요.
• theme.ts를 수동으로 편집하지 마세요. 다음 생성 시 덮어쓰여집니다.

두 제품의 비디오가 동일한 색상으로 보인다면, theme.ts가 다시 생성되지 않은 것입니다. 다른 것을 건드리기 전에 가장 먼저 확인해야 할 사항입니다.

렌더링

cd pitchframe && npx remotion render LaunchVideo output.mp4

먼저 세 가지 확인을 하세요. 1초가 걸리고 2분짜리 실패한 렌더링을 방지합니다:

1. plan.json이 구문 분석됩니다. 위의 산술이 성립합니다.
2. 계획에 명명된 모든 스크린샷이 public/assets/에 존재합니다. interaction beat는 before_screenshot과 after_screenshot 모두 필요합니다.
3. pitchframe/에 node_modules가 존재합니다. 없으면 먼저 npm install을 실행하세요.

20초 비디오의 경우 20~60초가 예상됩니다.

렌더링이 실패할 때

무엇이든 변경하기 전에 실제 오류를 읽으세요.

증상	원인	수정 방법
Cannot find module '../plan.json'	스캐폴드 불완전	npx pitchframe install 다시 실행
Cannot find name 'ACCENT' 등	theme.ts 생성되지 않음	apply-palette.mjs 실행
지연 렌더링 타임아웃(글꼴 관련)	오프라인 또는 Google Fonts에 없는 글꼴	palette.json에서 fonts.sans를 Inter로 설정하고 다시 생성
이미지 디코드 오류	손상되었거나 부분적인 스크린샷	해당 샷 다시 캡처
컴포지션 지속 시간 불일치	total_frames가 beat와 일치하지 않음	산술 수정
OOM / Chrome 충돌	거대한 스크린샷	~4000px 너비 초과 이미지 다운스케일; --concurrency=2

렌더링 실패에 컴포지션을 다시 작성하여 대응하지 마세요. 데이터를 수정하세요.

렌더링이 두 번 실패하면 중단하고 증거를 보존하세요. plan.json, palette.json 및 에셋을 그대로 두고 어떤 파일을 봐야 하는지 말하세요. 검사 가능한 계획이 있는 실패한 렌더링은 복구 가능합니다. 다시 작성하여 "수정된" 렌더링은 그렇지 않습니다.

컴포넌트를 건드려야 할 때

계획이 beat 컴포넌트가 실제로 표현할 수 없는 것을 필요로 하는 경우에만 가능합니다. 이 경우 세 가지 규칙이 있습니다:

1. 추가하고, 다시 작성하지 마세요. 새로운 카메라 이동은 lib/camera.ts의 SHOTS 항목이지, 컴포넌트 재구성이 아닙니다. 그리고 pitchframe-motion-language에 나열되어야 합니다. 그렇지 않으면 아무도 선택하지 않습니다.
2. lib/motion.ts와 lib/camera.ts를 사용하세요. EASE, EASE_OUT, clickPulse, heldDrift, entranceBlur가 장르입니다. 수동으로 만든 이징은 하나의 beat가 다른 비디오에서 온 것처럼 보이게 만듭니다. 스프링, 바운스 및 탄성 곡선은 금지됩니다. 정확히 하나의 카메라 시스템이 있습니다. Stage.tsx 외부에 perspective 또는 3D 변환을 추가하지 마세요. 이 저장소에는 한때 두 개가 있었고, 서로 어긋나서 샷들이 같은 사람이 촬영한 것처럼 보이지 않게 되었습니다.
3. 데이터 주도적으로 유지하세요. 추가하는 모든 것은 plan.json의 필드에서 접근 가능해야 합니다. 이를 트리거하는 유일한 방법이 컴포넌트를 편집하는 것이라면, 그것은 일회용이며 참조에 속하지 않습니다.

여기서 항상 잘못된 것: 색상 리터럴; 컴포넌트에 하드코딩된 제품명 또는 복사본; 새로운 최상위 컴포지션; 1920×1080 / 30fps 계약 변경; 애니메이션 라이브러리 가져오기.

새로운 beat 유형을 추가하는 것은 거의 항상 잘못된 답변입니다. 스키마에 네 개가 있는 이유는 런치 비디오에 네 개가 필요하기 때문입니다. 새로운 beat 유형은 일반적으로 변장한 기능 beat이며, 스키마가 기능 목록을 표현할 수 있게 되는 순간 계획에는 하나씩 포함되기 시작합니다.

성공적인 렌더링 후

경로와 편집 기능을 보고하세요:

완료. 비디오가 ./pitchframe/output.mp4에 준비되었습니다.

편집하려면 다음처럼 요청하세요:
  "히어로 순간을 더 길게 유지해"
  "변경된 필드 대신 확대해"

편집은 pitchframe-editing이 처리하며, 파이프라인을 다시 실행하지 않습니다.