yuv-video-director은(는) 무엇을 하나요?
YUV.AI 비디오의 지휘자입니다. **에이전트(당신)**가 각 비트에 필요한 것을 결정하고, 적절한 엔진으로 라우팅한 다음, 모든 것을 하나의 HyperFrames 구성으로 조합하고, YUV.AI Neon Phoenix 브랜드로 래핑하고, 자체 검증한 후 MP4로 렌더링합니다. 이 스킬은 라우터이자 실제 참조 구현체입니다. 해당 엔진이 사용될 때만 참조 파일을 불러오십시오.
디자인 진리의 원천:
yuv-design-system스킬(Neon 모드 — 분홍#FF1464, 시안#00E5FF, 풍부한 검정/흰색, Anton+Inter+JetBrains Mono, 신경망 불사조 모티프)입니다. 비디오 형태는 **frame.md**입니다. — references/frame-md.md를 참조하십시오. 번들 템플릿: assets/FRAME.md. 프로젝트 루트에 넣으면 HyperFrames가 읽습니다.
유일한 법칙 (모든 것을 결정함)
HyperFrames는 헤드리스 Chrome → FFmpeg에서 각 프레임을 찾아 렌더링합니다(frameIndex = floor(t·fps), 동일 입력 → 동일 출력). 따라서 모든 시각적 요소는 다음 두 가지 종류 중 하나입니다:
| 패턴 | 실행 위치… | 엔진 | 규칙 |
|---|---|---|---|
| 실시간 탐색 가능 어댑터 | 렌더링 내부에서, 프레임당 시간 t에 따라 구동됨 | GSAP, Lottie (window.__hfLottie), Three.js, GSAP 프록시 onUpdate로 구동되는 캔버스 | 클록 기반이어야 함 — Date.now(), Math.random()(mulberry32 시드 사용), setTimeout 또는 .play() 사용 금지 |
| 사전 렌더링된 에셋 | 오프라인으로 실행되며, 파일을 출력하고 클립으로 가져옴 | ManimCE (Python→MP4/알파), TTS 오디오, 배경 제거 | 먼저 렌더링한 다음 <video>/에셋 클립으로 넣음 |
탐색 가능하면 어댑터입니다. 그렇지 않으면 사전 렌더링하십시오. Manim은 항상 사전 렌더링된 클립입니다. 자체 렌더러가 있고 Python에서 실행되므로 라이브 어댑터가 될 수 없습니다.
각 비트를 엔진으로 라우팅
"X를 TEASER/프로모로 설명 (FOMO, 절벽 엔딩, 빠름)" → references/teaser-explainer.md (공식)
"개념 / 수학 / 신경망 / 알고리즘 / 학습 설명" → ManimCE (사전 렌더링된 클립 — 티저용 BURSTS로 자름)
"브랜드 모션: 로고 스팅 · 통계 표시 · 아이콘 팝 · 펄스" → Lottie (라이브, lottie-web)
"운동 자막 · 제목 · 리빌 · 전환 · 데이터 콜아웃" → GSAP (라이브) ← 기본값
"3D / 공간적" → Three.js (라이브) (Babylon 사용 안 함)
음성 → 자막 → 전사 + 승인 웹앱 (video-edit 스킬 참조)
제공된 내레이션 없음 → TTS (Kokoro: npx hyperframes tts)
브랜드 색상 / 폰트 / 모티프 → frame.md (앞에서 가져옴)
GSAP은 텍스트/모션의 신뢰할 수 있는 기본값입니다. 디자인된 브랜드 그래픽에는 Lottie를, 아이디어 설명에는 Manim을 사용하십시오.
워크플로우
- 비트 계획. 내러티브 아크 + 각 비트에 필요한 엔진. 16:9 및/또는 9:16을 선택합니다.
- 브랜드 설정.
FRAME.md가 프로젝트 루트에 있는지 확인합니다(assets/FRAME.md 복사). 모든 색상/폰트/모티프는 여기서 비롯됩니다. 절대 임의로 만들지 마십시오. 모든 비디오에 반드시 포함해야 할 세 가지 브랜드 요소(references/brand-kit.md + references/cinematic.md 참조): 리빌 + 엔드 카드에 실제 불사조 로고(assets/logo-phoenix.png), 실제 특집 Lottie(생성 — assets/lottie-burst-generator.py), 링크 엔드 카드(로고 + "LET'S FLY HIGH" + 전체 링크 세트 + CTA). 티저/소셜 페이싱은 references/editing.md 참조; 심리적/절벽 엔딩/FOMO 컷은 references/cinematic.md 참조. - 먼저 에셋 비트 사전 렌더링(클립으로 존재하도록):
- Manim → references/manim.md + assets/manim-scene-template.py.
py -m manim render -qh --fps 30 scene.py SceneName렌더링, MP4를assets/에 복사. - 자막/TTS →
video-edit스킬(전사 → 승인 웹앱 → 동기화) 및npx hyperframes tts재사용.
- Manim → references/manim.md + assets/manim-scene-template.py.
- 스캐폴딩 + 구성.
npx hyperframes init <slug> --non-interactive.index.html작성(hyperframes스킬이 계약임). 사용:- 탐색 가능한 신경망 필드 배경 → assets/neural-net-field.js
- Lottie 브랜드 방식 → references/lottie.md + assets/neural-pulse.json
- Manim 렌더를
<video class="clip" muted playsinline>본문 클립으로 - 장면별 GSAP 진입, 각 경계에서 네온 플래시 전환, 마지막 장면에서만 페이드 아웃
- 티저 / 소셜 페이싱(빠른 하드 컷, 운동 단어 충돌, 훅 몽타주, 글리치/크로매틱 스탭) → references/editing.md — 슬라이드쇼가 아닌 프로듀서처럼 자르십시오
- 자체 검증(게이트). references/gates.md:
npx hyperframes lint(0 오류) →validate(0 콘솔 오류, WCAG AA) → 렌더 → 타임라인 전체에서 5개 프레임 스폿 체크. 수정 → 재실행. Lottie는 반드시 스크린샷 검증되어야 함(Skottie-vs-lottie-web 트랩). - 렌더링.
npx hyperframes render --fps 30 --output renders/<name>_FINAL.mp4. 세로형의 경우 1080×1920 레이아웃으로 복제(video-edit참조).
전제 조건 (먼저 확인; 우아하게 저하)
references/prereqs.md 참조. Node 22+, FFmpeg, Python 3.11+ with pip (Manim/자막용) 필요. 이 머신에서 실제 Python은 **py → C:\Python313**입니다(기본 python은 Hermes의 venv로 pip가 없음 — 사용하지 마십시오). ManimCE는 py -m pip install manim으로 설치됩니다(Tex()/MathTex()가 아닌 Text()/MarkupText()로 작성하면 LaTeX 불필요). Manim을 사용할 수 없으면 → 수학 비트를 건너뛰거나 설치 제안; 전체 비디오를 하드 실패시키지 마십시오.
이 스킬이 번들하는 것 (린트 + 렌더하는 참조 구현체)
| 파일 | 설명 |
|---|---|
| assets/FRAME.md | YUV.AI Neon Phoenix 비디오 프레임 사양(HeyGen의 Coral 팩에서 리브랜딩) |
| assets/neural-net-field.js | 결정적이고 탐색 가능한 신경망 불사조 캔버스 배경 |
| assets/neural-pulse.json | 수동 작성 Bodymovin Lottie (Skottie뿐만 아니라 lottie-web에서 렌더링) |
| assets/gen_content_lotties.py | 6개의 프로덕션급 CONTENT Lottie 생성기(WhatsApp-collapse, decode-beam, eye-read, ghost-line hero, orb-extract, brain-fire) — 투명, 지속+연속, lottie-web 검증됨 |
| assets/{wa-collapse,decode-beam,eye-read,ghost-line,orb-extract,brain-fire}.json | 생성된 6개의 콘텐츠 Lottie, 즉시 사용 가능 |
| assets/manim-scene-template.py | ManimCE 장면 템플릿, 네온 브랜드 스타일링, Text-only(LaTeX 없음) |
| assets/what_is_nn.py | "신경망이란 무엇인가" ManimCE 장면(뉴런 → 네트워크 → 학습, 34.5초) |
| assets/Anton-Regular.woff2 | 로컬 Anton(렌더러가 자동 해결하지 않음; @font-face 선언 필요) |
| references/composition-pattern.md | 전체 멀티 엔진 index.html 패턴(필드 + Lottie + Manim 클립 + GSAP + 플래시) |
| references/teaser-explainer.md | 시네마틱 티저-설명자 공식: 콜드 오픈 슬램 → manim BURSTS → 대면 → FOMO 몽타주 → 절벽 엔딩; 콘텐츠 동기화 투명 Lottie 비트; 탐색-모듈로 수정; 티저 음악 신스 |
동반 스킬
hyperframes (구성 계약 — 작성 시 항상 호출), hyperframes-cli, lottie,
video-edit (전사 + 승인 웹앱), yuv-design-system (브랜드). 이 스킬이 이들을 조율합니다.