maddexritter-rgb/vibe-editing-promo

/promo — 브랜드 비디오 제너레이터 (Remotion + Claude Code)

두 종류의 프리미엄 브랜드 영상을 제작합니다. Remotion(React 기반 비디오), Claude Code 및 remotion-best-practices 스킬을 기반으로 합니다.

🎬 먼저 모드를 선택하세요 (명확하지 않으면 사용자에게 물어보세요)

• MODE A — 애니메이션 설명 / 데모. 완전히 애니메이션화되며, 실제 장시간 영상을 주축으로 사용하지 않습니다. 데크 데모, 기능 출시, 콘텐츠 플라이휠 비디오, SaaS 프로모션, 브랜드 설명자에 적합합니다. → templates/glass/(프리미엄 리퀴드-글라스) 또는 templates/saas/로 구축합니다. 아래 glass 섹션을 참조하세요. 실제 예제: ~/Downloads/engine/2026-06-12_WorkflowDemo (FlywheelFilm 컴포지션).
• MODE B — 아카이브 / 오리진 스토리 필름. 사용자가 긴 어셈블리 컷(자체 편집본 — 실제 푸티지, 챕터가 검은 프레임으로 구분됨)을 제공하고 이를 브랜드 필름으로 전환하기를 원합니다: 섹션 사이에 챕터 카드, 챕터별 장면 맞춤 음악, 플래시 트랜지션, 성장 곡선 페이오프가 포함됩니다. → 시대 카드 + assemble.py. 아래 MODE B 섹션을 참조하세요. 실제 예제: ~/Downloads/engine/2026-06-14_BrandHistory ("약 5분에 담은 4.5년" 오리진 필름).

두 모드는 동일한 브랜드 토큰화된 글라스 키트(스팅, GlassBG, 시대 카드, 성장 곡선, 브랜드 constants.ts)를 공유하므로 동일한 패밀리처럼 보입니다. constants.ts + public/ 로고에서 브랜드별로 재브랜딩하세요 — 컴포넌트에 브랜드 이름을 하드코딩하지 마십시오.

이 스킬을 사용해야 하는 경우 (다른 비디오 스킬과 비교)

• ✅ 사용: 독립형 프로모션 비디오, SaaS 데모, 코스 티저, 기능 출시 비디오, URL 기반 애니메이션 설명자
• ❌ 사용하지 마세요: 토킹 헤드 클립, 얼굴 추적 리프레이밍, 필러 단어 제거, 기존 비디오 캡셔닝 (shortform / caption-clips 사용)

기성 SaaS 애니메이션 템플릿

'SaaS 애니메이션 스타일'(2026년 테크 브랜드 Instagram/TikTok을 지배하는 $1-2k/비디오 스타일)을 위한 세 가지 프로덕션 준비 Remotion 컴포넌트입니다. 아무 Remotion 프로젝트에나 추가하세요:

• templates/saas/SaasTextPopup.tsx — 팝인 텍스트 + 로고 공개가 있는 4초 브랜드 인트로
• templates/saas/SaasGlassReveal.tsx — 백드롭 블러가 있는 6초 글라스 UI 기능 카드
• templates/saas/SaasDashboardTour.tsx — 애니메이션 커서가 있는 8초 3D 대시보드 둘러보기

전체 기술 레퍼런스는 editing-styles/saas-animation-style.md에서 확인하세요. 체인 오케스트레이터는 saas-animation-video에 있습니다 — "saas animation video 만들기"로 트리거하세요.

연결 및 브랜드 커스터마이징에 대해서는 templates/saas/README.md를 참조하세요.

---

🟣 프리미엄 리퀴드-글라스 데모 / 설명자 비디오 — templates/glass/

고급 브랜드 네이티브 '어이없는' 프레젠테이션 비디오(슬라이드 데크에 라이브 데모로 삽입되는 종류)의 기반 시스템입니다. 목표가 정제된 데크 또는 컨셉 중심의 설명자/데모이고, 실제 푸티지, 실제 제품 UI, 음성 대신 화면의 굵은 텍스트를 사용해야 할 때 — SaaS 템플릿이 아닌 이 시스템을 사용하세요. 실제 예제: ~/Downloads/engine/2026-06-12_WorkflowDemo ( FlywheelFilm 컴포지션 — 콘텐츠 플라이휠 데모). 1920×1080 @ 30fps, 굵은 로워 서드, VO 없음.

브랜드 무관. 키트는 브랜드 토큰화되어 있습니다. src/constants.ts에서 브랜드 설정(COLORS + 글꼴)을 하고 브랜드 로고 PNG를 public/에 넣으세요. 예제는 Speaker / company.com (Sambucus #131628, Electric Indigo #6f00ff, Lavender #a08bec, Poppins)을 사용합니다 — 각 브랜드에 맞게 토큰을 교체하세요. 컴포넌트에 브랜드 이름을 하드코딩하지 마십시오.

키트 구성 (templates/glass/src/)

• constants.ts — 브랜드 토큰 (COLORS, FPS, WIDTH, HEIGHT, 스프링 프리셋). 재브랜딩을 위한 유일한 장소입니다.
• components/GlassBG.tsx — 지속적으로 떠다니는 오브 그래디언트 배경 (연속 흐름 베이스; 모든 비트 뒤에 위치).
• components/GlassPanel.tsx — 프로스트 처리된 '리퀴드 글라스' 패널 (백드롭 필터 블러 + 광택 + 깊이). 텍스트 가독성을 위한 dark 변형 포함. 백드롭-필터는 Remotion의 헤드리스 Chrome에서 렌더링됩니다.
• components/GlassBeats.tsx — 비트 프리미티브: GlassTitle (훅 카드), GlassFrame/SceneDemo (글라스 창 안의 UI + 내레이션), GlassOutro (페이오프 카드 + 로고), PayoffCard.
• components/BrandSting.tsx — ~1.5초 로고 스팅 (스트릭 → 플래시 → 마크 블룸 → 워드마크).
• components/CreateShots.tsx — NarratorChip (굵은 로워 서드 캡션 = '굵은 텍스트, VO 없음' 레이어) + 미디어 플레이어 샷.
• components/Flywheel.tsx — 시그니처 비트: ContentFlywheel (복합 루프 RING), FlywheelEscalation (데크 라인 페이오프 쌓기), AutoPostScheduler (라이브 터미널 + 실제 화면 녹화, 나란히 배치), RawSessionPlayer, HeroClipPlayer (폰 프레임 안의 클립), Tier1Prompt/Tier1Pipeline (명령어 + 단계).
• components/ChannelScroll.tsx — 실제 채널 피드 스크롤 (썸네일 + 길이). RealClipShowcase.tsx — 실제 세로 클립이 재생되는 그리드. GlassBrowser.tsx — 브라우저 프레임 안의 앱 UI. ScaleWall/Odometer/Stopwatch — 볼륨 + 숫자 드라마. FXOverlay — 그레인/비네트.
• audio/index.tsx — AudioBed (음악, 낮음) + Sfx (우슈/브람/라이저/틱…) 마스터 게인 맵 포함.
• compositions/FlywheelFilm.tsx — 실제 예제: 스팅 → 훅 → 원시 증거 → 명령어 → 파이프라인 → (중간: 채널 + 자동 포스트 터미널/녹화) → (쇼츠: 히어로 + 그리드) → 플라이휠 링 → 에스컬레이션 → 아웃트로.

프로덕션 플레이북 (효과적인 순서)

1. 먼저 소스 자료(데크 / 브리프)를 읽으세요. 컨셉과 브랜드의 자체 언어를 추출하세요 — 비트에 사용할 그대로의 문장을 가져와 비디오가 그들의 프레젠테이션처럼 느껴지게 하세요. (일반적인 카피를 만들지 마세요.)
2. constants.ts에 브랜드 토큰을 설정하고 public/에 로고를 넣으세요 (로고 PNG 관련 주의사항 #5 참조).
3. TransitionSeries로 비트를 스토리보드하세요 (스팅 → 훅 → 데모 비트 → 페이오프 루프 → 에스컬레이션 → 아웃트로). 간결하게 유지하세요(~38–45초) — 빠른 비트, 굵은 로워 서드. ('너무 느림'이 #1 피드백입니다.)
4. 실제 에셋을 연결하세요 (아래 패턴 참조) — 항상 실제 푸티지/UI가 목업보다 낫습니다.
5. 렌더링: npx remotion render <CompId> out/<name>.mp4 --codec=h264 --crf=16 (편집을 요청할 때 *"use Remotion best practices"*를 추가하세요).
6. 프레임 추출로 QC — 절대 맹신하지 마세요 (주의사항 #1).
7. 전달은 프로젝트의 20_DELIVER/ (브랜드 이름으로) 폴더에 하세요. 특별한 지시가 없으면 로컬 전용입니다.

실제 에셋 패턴

• 푸티지 → <OffthreadVideo muted startFrom={..} playbackRate={..} />를 글라스 플레이어/폰/브라우저 프레임 안에 넣으세요. 스튜디오와 렌더 속도를 유지하기 위해 프록시(720×1280 / 1080)를 만드세요.
• 화면 녹화 → 브라우저 탭/주소 표시줄/배너를 제거하고 앱 UI에만 자르세요: ffmpeg -ss A -t B -i rec.mov -vf "crop=W:H:0:Y,scale=1600:-2" -an out.mp4. 속도를 높여서(playbackRate 2–3.5×) 각 단계를 머무르지 않고 시각적으로 진행하게 만드세요.
• 터미널 + 녹화 나란히 배치 (핵심 비트): 스타일링된 터미널은 로그가 실제 스크립트의 stdout을 그대로 반영하도록 하고(실제 스킬/스크립트를 읽어 진정한 라인을 얻으세요), 실제 화면 녹화 옆에 배치 — 둘이 같은 이름을 읽으면 하나의 시스템으로 보입니다. AutoPostScheduler를 참조하세요.
• 실제 데이터/썸네일 → 라이브로 가져오기: yt-dlp "https://youtube.com/@CHANNEL/videos" --flat-playlist --print "%(id)s|%(duration_string)s|%(title)s", 그런 다음 https://i.ytimg.com/vi/<id>/maxresdefault.jpg에서 썸네일(폴백 mqdefault.jpg). Speaker 클립 데이터의 경우 your analytics MCP를 사용하세요.

🛑 주의사항 — 각 항목은 실제 제작 과정에서 얻은 수정 사항입니다. 렌더링 전에 읽으세요.

1. 프레임으로 QC, 절대 맹신 금지. 매 렌더링 후, ffmpeg -ss <t> -i out.mp4 -frames:v 1 f.jpg를 모든 비트에 대해 실행하고 실제로 확인하세요. 에셋이 완료되는 동안 --frames=0-540으로 전반부를 미리 렌더링하세요.
2. 전환 시 텍스트 샐러드. 크로스페이드되는 두 개의 텍스트 비트가 겹쳐 읽을 수 없는 쓰레기가 됩니다. 수정: 각 텍스트 비트의 내용을 마지막 ~14프레임에 걸쳐 페이드 아웃(exit = interpolate(f,[dur-16,dur],[1,0])를 투명도에 곱함)하여 다음 텍스트가 크로스페이드 되기 전에 사라지게 하세요. (또는 텍스트 비트를 하드 컷하세요.)
3. 스팅/로고 번짐. 밝은 로고로 끝나는 스팅(또는 다른 비트)이 크로스페이드 중 다음 반투명 글라스 카드를 통해 번져 보입니다. 수정: 스팅 로고를 자체 끝에서 페이드 아웃하여 깨끗한 어두운 프레임으로 넘기세요.
4. 텍스트 위 스크림 디밍(미묘함!). <AbsoluteFill> 스크림은 위치가 지정된 형제 요소이므로 정적 텍스트 위에 칠해져서 텍스트를 어둡게 합니다 — 밝은 흰색은 살아남지만 라벤더/보조 색상 텍스트는 짓눌려 희미해 보입니다. 수정: 스크림을 zIndex:0에 배치하고 텍스트를 position:relative; zIndex:1 컨테이너로 감싸세요. (그러면 높은 투명도의 스크림이 텍스트를 어둡게 하지 않고 떠다니는 오브의 '빛났다가 꺼지는' 펄스를 죽일 수 있습니다.)
5. 보이지 않는 로고. 투명 패딩이 있는 정사각형 로고 PNG는 실제 마크를 작고 보이지 않게 만듭니다. 수정: PNG를 내용물에 맞게 먼저 자른 다음 너비로 크기를 조정하세요(<Img style={{ width: 600, height: 'auto' }} />).
6. 오디오 클리핑. 매핑되지 않은 SFX는 1.0으로 재생되어 풀 스케일 클립이 발생합니다. 수정: 마스터 게인(~0.5) + 전체 SFX별 VOL 맵 + 음성 아래 음악 ~0.2; 최종 결과물에 loudnorm I=-14:TP=-1.5 적용. volumedetect 최대값이 ≤ ~−3 dB인지 확인하세요.
7. zsh 워드 스플릿. for x in $VAR는 zsh에서 분할되지 않습니다(전체 문자열로 한 번 반복). 리터럴 목록 또는 ${=VAR}를 사용하세요. (썸네일 배치 다운로드에서 문제 발생.)
8. 마지막 프레임을 활성 상태로 유지하세요(검은색 금지) — 아웃트로는 로고 카드로 끝납니다. 마지막 프레임의 루마가 > ~10인지 확인하세요.
9. 글꼴은 @remotion/google-fonts(Poppins, JetBrainsMono)를 통해 제공됩니다. 숫자/키워드는 일정한 textShadow로 광택을 줍니다(배경의 광택에 의존하지 마세요 — #4 참조).

---

🧊 3D + 2.5D 시차 + ☁️ 클라우드 스케일 (MODE A 파워업)

실제 예제: ~/Downloads/_PROJECTS/2026-06-15_3DSaasDemo (샘플 SaaS 데모 — 시차 히어로, 떠다니는 글라스 대시보드 카드, 3D 막대 차트 + 실제 WebGL 변형).

3D — 두 가지 경로

• CSS 3D (기본값, 의존성 없음, 어디서나 렌더링). 씬을 perspective + transformStyle:'preserve-3d'로 감싸고; 레이어를 다른 translateZ에 배치하고 useCurrentFrame()으로 세계의 Z를 애니메이션 = 가까운 레이어가 먼 레이어보다 더 많이 움직이는 카메라 돌리(실제 2.5D 시차). 떠다니는 글라스 카드, 돌출된 막대 차트(앞/옆/위 면), 후퇴하는 그리드 바닥 모두 CSS 변환에서 비롯됩니다. 이것을 먼저 시도하세요 — 헤드리스 Chrome에서 확실히 작동합니다.
• 실제 WebGL — @remotion/three + React Three Fiber. 실제 메시, 조명, 그림자, 재질. CSS 3D로 할 수 없을 때만 사용하세요(진정한 지오메트리/조명/DOF). @remotion/three + @react-three/fiber@^9 + three를 설치하세요 (R3F v9는 React 19에 필요; v8은 React 18). Remotion의 useCurrentFrame()으로 애니메이션을 구동하고 R3F의 useFrame을 사용하지 마세요 (Remotion은 프레임별로 렌더링합니다). `<ThreeCanvas width