설명 영상, 하우스 스타일
모든 영상은 하나의 외형과 하나의 모션 언어를 공유하며, 처음에는 CRM 설명 영상용으로 제작되었습니다.
골드 레퍼런스는 reference/desk-crm-explainer.html (84.5초, 9개 장면, Desk CRM이라는 가상 제품)과
프레임 그리드 reference/contact.png입니다. 확실하지 않으면 레퍼런스를 열고 패턴을 복사하세요.
이 스킬의 파일:
| 경로 | 설명 |
|---|---|
templates/explainer-template.html | 여기서 시작하세요. 전체 도우미 키트와 3개의 예시 장면(제목, 커서 클릭이 있는 카드, 아웃트로)이 포함되어 있습니다. |
templates/apply-theme.mjs | themes/의 테마를 비디오 HTML에 적용합니다(--theme studio --html explainer.html, --list). 해당 위치에서 실행합니다. |
themes/*.json | 테마별 외형과 사운드(house, studio, ember, tide): 색상, 그라데이션, 글꼴, 카드 모서리 반경, 로고 마크, 음악 키, 진행, 템포, 아르페지오. house가 기본값입니다. |
templates/render.mjs | ffmpeg으로 파이프되는 Playwright 프레임 스텝퍼입니다. 비디오, 포스터, 콘택트 시트, 스틸 이미지. 해당 위치에서 실행하며, 복사하지 않습니다. |
templates/compose.py | 장면 로컬 시간에 동기화된 Numpy 음악 배경 및 SFX, 마스터링 및 먹싱. 비디오별로 복사하세요. |
templates/voiceover.sh | 선택적 macOS say 보이스오버, 음악 아래로 덕킹됩니다. 인수와 함께 해당 위치에서 실행합니다. |
checklist.md | 비평 체크리스트. 전달 전에 모든 항목을 통과해야 합니다. |
reference/ | 레퍼런스 HTML 및 콘택트 시트. 절대 편집하지 마세요. |
examples/tidy-tasks/ | 템플릿으로 빌드된 짧은 완성 비디오(20초): HTML, compose.py 및 콘택트 시트. |
설정(머신당 한 번): 스킬 폴더에서 npm install 및 npx playwright install chromium 실행(폴더에 package.json이 있음) 및 ffmpeg와 Python 3(numpy 포함). render.mjs는 시작할 수 없을 때 무엇이 누락되었는지 설명합니다.
외형
하나의 모션 언어, 다양한 외형. 아래 모든 내용은 기본 테마인 house를 설명합니다. 테마는 팔레트 토큰, 그라데이션, 글꼴, 카드 모서리 반경, 로고 마크 및 음악을 변경합니다. 모션, 커서, 자막 또는 체크리스트는 절대 변경하지 않습니다. 동일한 테마와 동일한 장면은 프레임 단위로 동일한 비디오를 제공합니다. 테마는 themes/*.json(house, studio, ember, tide)에 있습니다. node $SK/apply-theme.mjs --list로 확인하고, --theme <name> --html explainer.html로 HTML 상단의 THEME 블록에 적용합니다. compose.py는 동일한 블록에서 음악 설정을 읽습니다. 브리핑에서 테마를 지정합니다. 지정되지 않으면 house를 사용합니다. 새 테마를 위해 json을 복사하고, 토큰을 변경하고, gr, am, rd를 녹색, 호박색, 빨간색으로 인식할 수 있게 유지하고, 렌더링하는 머신에 존재하는 글꼴을 선택한 후, 사용하기 전에 콘택트 시트에서 대비를 확인하세요.
장면별 테마(선택 사항): 더 많은 테마 객체를 THEMES에 붙여넣고 장면에 theme: 'studio'를 지정하세요. 팔레트, 그라데이션 및 카드 모서리 반경은 1초 크로스 페이드 동안 변형됩니다. 글꼴과 로고 마크는 경계에서 전환됩니다. 음악은 첫 번째 테마를 유지합니다. 비디오 자체가 다양성에 관한 경우에 사용하세요. 일반적인 경우는 하나의 테마입니다.
무대: 1920x1080 SVG, 글꼴 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif (테마 font).
배경, 세 개 레이어, 테마 내에서 절대 변경되지 않음:
- 50% / 30%에 중심을 둔 방사형 그라데이션, r 75%:
#172638->#111b26(60%) ->#0f1720 - 도트 그리드: 40px 패턴, r 1.6 도트
#22303f(70% 불투명도) - 자막 밴드: 하단 200px (y 880..1080)에서
#0b121a로 90% 페이드
팔레트 토큰(템플릿의 C, 이름 유지):
| 토큰 | 16진수 | 용도 |
|---|---|---|
| bg | #0f1720 | 페이지, 검은색 페이드 대상 |
| s1 | #141d27 | 카드 표면 |
| s2 | #1b2733 | 행, 삽입부, 내부 패널 |
| bd | #2a3a4b | 테두리, 그리드선, 빈 도트 |
| tx | #e6edf3 | 기본 텍스트 |
| mu | #a0b1c5 | 보조 텍스트, 열 헤더 |
| bl | #3b82f6 | 동작, 선택, 패킷, 커서 폭발, 브랜드 악센트 단어 |
| gr | #2fca73 | 완료, 활성, 이득, 성공 |
| am | #f59e0b | 주의, 핫, 이상치 |
| rd | #ef4444 | 손실 또는 오류 전용 |
| off | #3a4a5c | 비활성 상태 도트 |
| paper / ink | #f3f6fa / #1b2733 | 밝은 문서 페이지 |
| light blue | #93c5fd, core #dbeafe | 올가미, 하이라이트, 패킷 코어 |
| click spark | #ffd166 | 클릭 폭발의 번갈아 나타나는 스포크 |
그라데이션: logoG 파란색 #3b82f6에서 녹색 #2fca73(대각선) 로고 타일 및 밑줄 막대용; hotG 호박색에서 빨간색으로 "핫" 막대용; blueBar #2563eb에서 #3b82f6; areaG 차트 아래 녹색 38%에서 0으로.
도형:
- 카드: 반경 26, s1 채우기, 2px bd 테두리, 그림자
dy 16, blur 20, 검은색 42%(card()). - 행: 반경 14..18, s2 채우기, 높이 52..80, 피치 64..96px.
- 칩: 전체 알약, 높이 40, 색상 16% 채우기, 레이블 24px / 600 (해당 색상) (
chip()). - 기본 버튼: 반경 22, 높이 84, 단색 bl, 흰색 34px / 700 레이블, 클릭될 때까지 부드러운 광선 펄스.
- 아이콘 및 알약용 작은 그림자:
dy 8, blur 8, 검은색 45%(#shs). - 앱 창(레퍼런스
dashboard()): s2의 66px 상단 표시줄(r 8의 신호등 도트(rd, am, gr 80%) 포함),#111922의 214px 사이드바, 높이 48(반경 14)의 탐색 항목, 활성 항목 bl(20%), 반경 18의 KPI 타일. - 상태 도트 r 14; 아바타 링 4px + 25% 후광;
lock()의 자물쇠. - 브랜드 버그: 로고 46px + 이름 28 / 700 at (56, 40), 85% 불투명도, 장면 2부터 아웃트로까지 표시.
타이포그래피 규모(px / 두께): 워드마크 132 / 700 (아웃트로 96), 태그라인 58 / 500 mu, 마무리 라인 56 / 600, 자막 50 / 600, 큰 숫자 52..64 / 700 표 형식, 카드 제목 34..40 / 700, 행 텍스트 26..28 / 600, 레이블 및 칩 24 / 600, 22 미만 없음. 워드마크 자간 -1%.
구성 규칙:
- 콘텐츠는 y 120..860 및 x 140..1780에 있습니다. 자막 밴드와 브랜드 버그 코너는 비워 둡니다. 여기에는 정지 커서도 포함됩니다. 커서 팁을 y <= 800으로 유지하세요(화살표는 팁 아래 약 75px까지 도달함).
- 텍스트 크기에 맞춰진 모든 것(취소선, 밑줄, 하이라이트 상자, 알약)은
textW(str, size, weight)에서 너비를 가져오며, 추측 상수를 사용하지 마세요. - 프레임의 2/3를 비워 두지 마세요. 콘텐츠가 왼쪽과 오른쪽으로 분할되면 중간을 흐름선, 패킷 또는 페이지 팬으로 연결하세요. 전체 장면 그룹(
G(s, {x: SX}))을 이동하여 다시 중앙에 배치하세요. - 장면당 하나의 아이디어. 최대 두 개의 카드를 나란히 배치하고 하나의 세부 카드를 추가할 수 있습니다.
- 데이터는 항상 가상입니다: Client A, Northwind, Maple Ridge, Bluebird, Harbor Point, ACC 01.
모션 언어
이징 키트(템플릿 내): E 3차 인 아웃(모든 것의 기본값), EO 3차 아웃(안착), EB 약 10% 오버슈트가 있는 백 아웃(팝: 카드, 칩, 배지, 아이콘), esine 그려진 경로용, fadeIO(t, a, b, 0.35) 커서 불투명도용, 5차 아웃 1 - (1 - x)^5 카운터용. 결정론: rng(seed)만 사용, Math.random 또는 벽시계 사용 금지.
진입:
- 카드: 0.5초 동안 페이드 + 0.6초 동안 20px 상승 또는
mix(0.92, 1, EB)를 통해 0.7초 동안 스케일. - 목록 행: 0.08..0.12초 간격, x -20 / -30 또는 y +16에서 슬라이드 인, 각각 0.5초.
- 팝:
EB0.5..0.7초. 배지 스케일 0.7 -> 1. - 워드마크: 0.8초 동안 중앙에서 열리는 클립 와이프와 34px 상승; 로고 마크는
pathLength로 그려짐.
커서 키트(drawCursor, curPos):
- 흰색 화살표 경로
ARROW,#0b11183.4px 윤곽선, 드롭 섀도우 dx 4 dy 7 blur 4 (50%), 기본 스케일 1.1. keys: [[t, x, y], ...](로컬 초), (x, y)는 화살표 팁. 글라이드는 3차 인 아웃과 거리의 12% (최대 110px)의 측면 호를 사용합니다. 기울기는 수평 속도를 따릅니다(px당 0.35도, 최대 14도).- 일반적인 글라이드 0.7..1.5초. 장면 시작 약 1.5초 후에 프레임 밖(1880, 1080)에서 진입합니다.
- 클릭 최소 0.15초 전에 도착하여 컨트롤 중앙에 정확히 위치합니다.
- 클릭: 클릭 시점에 피크(0.1초 일찍 시작하여 0.34초 창)인 x +16% 및 y -22% 스쿼시, 이어서 0.6초 폭발: 파란색 링 r 8 -> 54 (6 -> 1px로 얇아짐), 8개 스포크가 흰색 /
#ffd166번갈아 나타남. - 클릭된 컨트롤은
press()로 스케일 0.93으로 딥하고, 광선 펄스가 멈춥니다. - 동작 후, 조용한 휴식 지점(카드 사이, 예: (1010, 800))으로 글라이드하여 유지합니다. 장면과 함께 페이드 아웃합니다.
trail은 그리는 동안 12개의 파란색 혜성을 추가합니다.pos는 사용자 정의 경로(올가미)에 대한 키를 대체합니다.
시그니처 동작(복사할 레퍼런스 장면):
- 올가미: 커서가
esine으로 흔들리는 타원을 그리고,#93c5fd5px(16 12, 흐름)의 점선, 0.35초 광선 플래시와 7% 채우기로 닫힌 다음, 아이콘이 곡선 경로를 따라 고스트 프레임으로 날아가 앱 창으로 구체화됩니다(sBefore). - 패킷: S자 곡선 위의 6개의 혜성 꼬리가 있는 빛나는 도트(r 22 광선 + r 12
#dbeafe코어), 1.2..1.45초 동안 3차 인 아웃, 24px/s로 흐르는 점선 안내선, 발신자 파란색으로 깜박임, 도착 시 녹색 링(packet(),sClose). - 상태 도트: 회색 -> 녹색 (링 폭발 r 14 -> 40, 0.6초) 및 1.25x 팝, 이어서 호흡하는 광선
0.25 + 0.2 sin(3t). 경고: 호박색, 1.3초마다 반복 링, 짧은 흔들림(statusDot(),sStatus). - 차트 그리기:
pathFrom이 1.5..3.7초 동안 선을 드러내고, 6..7px 녹색,areaG채우기, 빛나는 헤드 도트(r 18 광선 + r 10 흰색). 막대는 0.18초 간격으로 0에서 성장. 히트맵 셀은 간격을 두고 팝(sAlgos,sHistory). - 카운터: 1.0초 동안 5차 아웃으로 위로 카운트, 표 형식 숫자.
- 페이지 팬: 페이지가 버튼을 떠나 중앙을 통해 펼쳐짐(회전 -10, -3.5, 3.5, 10도, 60px 홉), 그런 다음 각각 0.55초 간격으로 스케일 0.56으로 트레이에 110px 홉; 트레이가 가득 차면 녹색으로 빛남(
sReports). - 조직 팬: 클릭된 아바타에서 팀 열로 선이 그려지고, 자물쇠가 닫히며, 점선 윤곽선이 부서를 그룹화함(
sBook). - 체크리스트(템플릿 키트):
checkbox()클릭 시 딥, 녹색 팝, 체크 표시를 그림;strike(x, y, textW(...) + 8, u)레이블을 취소선으로 표시; 각 체크는progressRing()에packet()을 보내며, 도착 시 한 단계씩 이징되고 닫힐 때 빛남. 목록 장면은 checkbox + strike + packet + ring입니다(examples/tidy-tasks/참조).
전환: 장면은 연속적입니다. 각 장면은 마지막 0.5초 동안 페이드 아웃되고 다음 장면은 처음 0.5초 동안 0.985 -> 1 스케일 안착(배경을 통한 딥)으로 페이드 인됩니다. 첫 번째 장면은 단색으로 시작하고, 아웃트로는 자체 0.6초 페이드로 bg로 끝납니다. 전환 프레임은 의도적으로 거의 비어 있습니다. "수정"하지 마세요.
홀드 및 유휴 모션: 모든 프레임에서 무언가가 움직입니다. 흐르는 대시 오프셋, 호흡하는 광선(sin(3t)), bob() 3..5px 플로트, 느린 스피너(60도/초), 표류하는 아이콘(18 / 14px)을 사용하세요. 자막 읽기가 완료될 수 있도록 장면의 마지막 비트 후 최소 1.5초의 홀드를 유지하세요.
복사 규칙
- 영어 자막, 문장 케이스, 마침표로 끝남. 한 줄 또는 두 줄, 줄당 최대 약 48자.
- 화면 표시 시간(자막 0.45..1.05초에 페이드 인,
dur - 0.75에서 아웃)은 4단어당 최소 1초 이상, 2.5초 미만이어야 합니다. 실제로 장면은 약 5초보다 짧지 않습니다. - 자막이나 화면에 구두점으로 대시 사용 금지(엠 대시, 엔 대시 또는 공백 하이픈 없음). 쉼표와 마침표를 사용하세요.
- 참된 주장만 허용됩니다. 화면의 숫자(고객, 계정, 간격)는 사용자 또는 제품에서 제공되며 절대 발명되지 않습니다. 템플릿 숫자는 PLACEHOLDER로 표시됩니다. 참된 숫자가 없습니까(티저, 가상 제품)? 아웃트로
STATS를 일반 단어로 만드세요:['Simple lists', 'Daily focus', 'Clear progress']: 알약이 카운트 대신 팝됩니다. - 실제 고객 데이터 없음: 실제 이름, 계정 번호, 잔액, 이메일 또는 고객 로고가 없습니다. 가상 세트를 사용하세요.
- 제목 및 아웃트로에는 자막이 없습니다. 태그라인과 마무리 라인이 그 역할을 합니다.
아키텍처
- 네트워크나 라이브러리가 없는 하나의 독립적인 HTML 파일. SVG 무대 + 하나의 IIFE 스크립트.
render(t)는 순수 함수입니다. t만으로#frameinnerHTML을 재구축합니다.window.renderAt(t)로 노출되며,window.TOTAL_DURATION및window.SCENES_INFO가 있습니다. URL에#manual이 없으면 실시간으로 루프됩니다.SCENES = [{ id, start, dur, fn, cap }], 연속적. 각 항목을 해당 키 순서로 한 줄에 유지하고const TOTAL = <number>;를 리터럴로 유지하세요.compose.py는 정규식으로 둘 다 구문 분석합니다.- 장면은 로컬 시간
lt를 사용하는fn(lt, dur) -> { svg, cursor? }입니다. 장면 내의 모든 비트 시간은 로컬 상수(click,send(i),onT(i))이며, 이것이 오디오 스크립트가 미러링하는 대상입니다. - 헬퍼: 수학(
clamp lin E EO EB mix f rng fadeIO bob), svg(T G R Ci card chip check avatar lock logo wordmark textW), 차트(pathFrom walk scalePts spark areaChart bez), 모션(ring statusDot packet press progressRing checkbox strike), 커서(curPos drawCursor),caption.G()는 불투명도가 ~0일 때 ''를 반환하므로 숨겨진 레이어는 비용이 들지 않습니다. - 그리기 순서: 장면 콘텐츠, 자막, 브랜드 버그, 마지막 커서.
const STATS = [...]는 줄의 시작 부분에 한 줄로 유지됩니다.compose.py는 아웃트로 사운드를 위해 이를 읽습니다.
워크플로우
- 브리핑. 대상, 제품, 실제 숫자가 포함된 3..6개의 참된 주장, 길이(전체 60..90초, 티저 20..40초), 게시 위치, 테마(
house,studio,ember,tide또는 새 json). - 스토리보드. 장면 ID, 지속 시간, 자막, 시각적 은유, 커서 동작 및 비트 시간이 포함된 표. 아크: 훅(로고, 태그라인) -> 이전(고통) -> 장면당 하나의 기능 -> 아웃트로(통계 또는 단어 알약, 마무리 라인). 빌드 전에 복사 규칙에 따라 자막 타이밍을 확인하세요.
- 빌드. 작업 폴더에서
SK를 이 스킬의templates폴더로 설정합니다(예:SK=~/.claude/skills/explainer-video/templates):cp $SK/explainer-template.html explainer.html && cp $SK/compose.py .스킬 복사본을 절대 편집하지 마세요. 테마 적용:node $SK/apply-theme.mjs --theme <name> --html explainer.html(house의 경우 건너뜀).BRAND를 설정하고, 예제 카드 장면을 교체하고, 표시된 블록에 장면을 추가하고, 시작 및TOTAL을 업데이트하고,STATS를 설정합니다. 레퍼런스에서 패턴을 가져옵니다. - 미리보기. 브라우저에서 HTML 열기(루프됨), 그런 다음 모든 클릭, 착륙 지점 및 경계에서 스틸 이미지 렌더링:
node $SK/render.mjs --html explainer.html --stills 3.2,4.9,8.6 --stills-dir critique/v1. - 렌더링.
node $SK/render.mjs --html explainer.html --out name.mp4는 MP4,-poster.png및-contact.png를 기록합니다. - 비평.
checklist.md에 대해 콘택트 시트와 스틸 이미지를 읽습니다. 모든 항목을 통과해야 합니다. 수정하고, 다시 렌더링하고, 통과할 때까지 다시 비평합니다.
체크리스트
checklist.md를 참조하세요.