ClaudinNarsis/claude-video-skills

기본 설명자

차분하고 프리미엄한 제품 데모입니다. 자금이 넉넉한 스타트업이 홈페이지에 올리는 그런 종류의 영상입니다. 핵심은 절제입니다. 밝고 공기감 있는 캔버스, 한 번에 하나씩 나타나는 짧은 텍스트 라인, 그리고 제품의 실제 인터페이스를 깔끔하게 재구성하여 아주 가까이서 사용하는 모습을 촬영합니다. 카메라가 스토리를 전달합니다. 텍스트 라인으로 밀고 들어가고, 타이핑을 따라가며, 결과를 보여주기 위해 뒤로 당겨지고, 다음 기능으로 부드럽게 미끄러집니다.

하나의 HTML 페이지로 작성하며, 시간값을 받아 모든 프레임을 렌더링한 다음 모션 블러와 사운드트랙을 포함한 MP4로 변환합니다.

1단계: 브리프 받기 (한 번의 메시지로, 그 후에는 진행)

한 번의 메시지로 모든 것을 물어본 후, 스스로 작업하세요. 제품 정보만 필수이며, 나머지가 비어 있으면 직접 결정하고 선택한 내용을 알려주세요.

1. 제품: 이름과 몇 문장으로 설명하는 기능. 웹사이트 URL이 있으면 더 좋습니다.
2. 시청자가 반드시 기억해야 할 한 가지 (예: "아이디어를 입력하면 라이브 앱이 나온다").
3. 브랜드: 색상, 폰트, 로고 파일 또는 "웹사이트 참조". 없으면 아래 기본 팔레트를 사용하세요.
4. 형식: 16:9 (1920×1080) 또는 9:16 (1080×1920). 기본값 16:9.
5. 길이: 기본값은 이 스타일에 대해 아래에 제공됩니다.
6. 음악: 자체 트랙(파일 경로) 또는 합성. 기본값: 합성.
7. 방향 (선택 사항): 원하는 장면, 태그라인, 클릭 유도 문구, 피해야 할 사항 등.

URL이 제공된 경우, 아무것도 작성하기 전에 웹에서 제품의 실제 문구, 기능, 색상 및 폰트 이름을 읽어오세요. UI 레이블 및 태그라인에는 실제 단어를 사용하세요.

절대 사실을 지어내지 마세요. 고객 수, 수익, 평점, 사용 후기 또는 인용문을 조작하지 마세요. 숫자는 사용자나 웹사이트에서 명시한 경우에만 사용하고, 그렇지 않으면 상대적인 막대, 진행률 및 플레이스홀더 스켈레톤 라인을 사용하세요. UI 내부의 예시 콘텐츠(프롬프트, 파일 이름, 프로젝트 이름, 영수증의 가격)는 괜찮으며 신뢰할 수 있어야 하지만, 제품 자체에 대한 주장(통계, 사용자 수, 평점, "무료"와 같은 제안)은 허용되지 않습니다. 클릭 유도 문구는 URL만 사용하거나 사용자나 웹사이트가 제공한 내용을 사용하고, 없으면 이름과 태그라인으로 끝내세요.

로고. 사용자가 파일을 제공하거나 자신의 제품이고 요청한 경우에만 로고를 사용하세요. 그렇지 않으면 브랜드 폰트로 이름을 텍스트로 작성하세요. 타사 로고(통합)는 제공된 경우에만 사용하고, 그렇지 않으면 이름이 있는 중립적인 둥근 타일을 사용하세요.

또한 (선택 사항) 3~5개의 기능 또는 워크플로 단계와 제품이 연결되는 항목(통합)을 물어보세요. URL이 제공된 경우 사이트에서 가져오세요.

이 스타일의 기본 길이: 60초. 범위 45~90초. 길이에 따라 예산을 책정하고 (선택적 섹션을 먼저 제거):

길이	기능	선택적 섹션
45초	2~3개, 각 약 9초	증명 또는 통합 중 하나(둘 다는 안 됨)
60초	3~4개, 각 약 10초	증명 / 통합 중 하나
90초	4~5개, 각 약 12초	둘 다

2단계: 스크립트 작성 후 빌드

구조

스크립트와 비트 시트를 먼저 작성하세요. 화면의 모든 텍스트 라인, 그 뒤에 나올 UI 순간, 그리고 그 시간. 위 예산에 맞춰 시간을 합산하세요. 화면 텍스트가 유일한 "음성"이므로, 스스로 이야기를 전달해야 합니다.

장면과 카메라가 어떻게 결합되는지: 각 장면(제목 라인, UI 순간)은 자체 카메라가 있는 별도 레이어입니다. 장면 내에서 카메라는 밀고, 따라가고, 뒤로 당겨집니다. 장면 사이에서는 나가는 레이어가 짧은 흐림 효과(0.3~0.4초)와 함께 들어오는 레이어(이미 움직이기 시작한)로 용해됩니다.

1. 오프닝 (0~5초). 평범한 밝은 캔버스. 중앙에 작은 단어가 나타납니다: Introducing. 브랜드 순간으로 용해됩니다: 부드러운 브랜드 그라데이션이(비단 같은 대각선 빛 띠가 천천히 움직이며) 로고 또는 이름이 중앙에 작게 나타납니다.
2. 문제 또는 요청 (약 5초). 시청자가 인식할 수 있는 짧은 라인 (아직도 수동으로 잠재 고객 목록을 만들고 계신가요?) 또는 제품의 입력란으로 바로 이동합니다: 커다란 둥근 입력 상자(비어 있고 플레이스홀더 텍스트 포함), 그 아래 제안 칩.
3. 기능 챕터 (35개, 각 약 815초). 각 챕터는:
   • 제목 라인: 한 문장으로 짧게 (1080p 기준 약 28px), 평범한 캔버스 중앙에 정렬. 단어 단위로 타자 또는 페이드 인됩니다. 그런 다음 카메라가 그 라인을 향해 밀고 들어가서 라인이 프레임 너비의 약 75%가 될 때까지 확대되고, 하나의 키워드나 짧은 구문에 하이라이트가 적용됩니다: 부드러운 브랜드 색상 상자가 왼쪽에서 오른쪽으로 스쳐 지나가며 강조합니다 (의사 결정권자에게 전화하세요. 직접적으로.).
   • UI 순간: 제품의 실제 인터페이스를 깔끔한 벡터 UI(스크린샷 아님)로 재구성하고, 중요한 부분만 잘라서 크게 보여줍니다. 카메라는 요소가 프레임의 대부분을 채울 만큼 가까이 있으며, 액션을 따라 움직입니다: 입력란에 텍스트 타이핑(카메라는 커서를 따라갑니다; measureText로 텍스트 길이를 측정하여 위치를 파악), 에이전트 단계가 하나씩 체크됨(스피너 → 체크, 일치하는 항목 247개 발견), 결과 카드가 쌓이고 먼 것은 흐릿하게(피사계 심도), 테이블이 행 단위로 채워지고, 커서가 셀 버튼을 클릭하면 값이 나타나고, 새 열이 추가되고 각 셀이 "생각"하는 듯한 쉬머 효과 후 값이 나타나며, 추론 및 출처가 포함된 팝오버가 열립니다.
   • 뒤로 당기기: 액션 후, 카메라는 잠시 전체 화면을 보여주기 위해 부드럽게 뒤로 물러나 시청자가 현재 위치를 이해할 수 있게 한 후, 다음으로 미끄러집니다.
4. 증명 (선택 사항, 실제 숫자만). 숫자가 포함된 문장으로 숫자가 카운트업되며 강조 표시됩니다 (3억 개 이상의 프로필 데이터베이스 기반), 미묘한 점선 지구본 또는 그리드 위에.
5. 통합 (선택 사항). 기존 워크플로에 맞춰 제작되었습니다.가 중앙에 표시되고, 8~12개의 앱 타일(둥근 사각형, 제공된 경우에만 실제 로고 사용; 통합이 적으면 반복 사용)이 가장자리에서 다양한 깊이로 떠오릅니다: 가까운 것은 더 크고 약간 흐릿하며, 먼 것은 작고 선명하며, 모두 시차 효과를 내며 움직입니다. 여기서 텍스트는 카메라 푸시 대신 자체적으로 확대되어 타일이 프레임 안에 남습니다.
6. 클로저. 브랜드 그라데이션 위에: 사용 사례를 순환하는 회전하는 강조 단어가 있는 한 문장 ([프로스펙팅 / 리서치 / 아웃리치]를 모두 Product에서 하세요.), 그런 다음 실제로 제품에 다른 사용 방법이 있는 경우에만 (예: Claude 커넥터가 있는 제품의 경우 아니면 Claude에게 물어보세요), 마지막으로 핵심 구문이 강조된 태그라인.
7. 엔드 카드 (3초). 브랜드 그라데이션 위에 로고 또는 이름, 그 아래에 URL 또는 클릭 유도 문구를 작게 표시.

프리미엄을 만드는 규칙

• 한 번에 한 가지. 한 번에 한 줄의 텍스트와 하나의 UI 요소만 표시하세요. 텍스트와 UI는 거의 프레임을 공유하지 않습니다: 텍스트 장면, 그 다음 UI 장면.
• 카메라가 편집자입니다. 하드 컷 없음. 모든 장면 변경은 카메라 움직임(밀어 넣기, 당기기, 미끄러지기) 또는 일반 캔버스 위의 부드러운 블러-디졸브입니다. 카메라 움직임은 부드러운 이즈(ease, 0.6~1.2초 동안) 또는 강하게 감쇠된 스프링(z ≥ 0.95)이며, 바운스는 없습니다.
• 실제 UI, 깔끔하게. 제품(또는 해당 웹사이트)에 대해 알고 있는 내용을 바탕으로 인터페이스를 재구성하세요: 실제 레이아웃, 레이블, 색상, 폰트 및 모서리 반경을 장면에 필요한 만큼 단순화합니다. 내부 콘텐츠는 제품에 맞는 신뢰할 수 있는 예시 데이터입니다. 부드러운 그림자, 1px 테두리, 넉넉한 여백.
• 커서: 일반 macOS 스타일 화살표, 부드러운 곡선을 따라 이동하고, 클릭하기 전에 잠시 멈추며, 작은 눌림 동작과 클릭된 컨트롤에 부드러운 잔물결 효과. 호버 상태 변경.
• 타이포그래피: 브랜드 폰트를 알고 있으면 사용하고, 그렇지 않으면 Inter 또는 Geist. 제목 라인은 작고 일반 두께(카메라를 통해 커지지, 폰트 크기로 커지는 것이 아님). 큰 텍스트는 좁은 자간.
• 기본 팔레트: 캔버스 #F7F7F8, 텍스트 #111114, 보조 #8A8A94, UI 표면은 흰색에 #E7E7EC 테두리, 브랜드 강조 #2E6BFF, 하이라이트 상자 = 강조색의 15~20% 불투명도. 브랜드 그라데이션: 흰색 → 연한 강조색 → 강조색, 느린 대각선 실크 밴드(캔버스에 그리되 CSS 블러 사용 금지). 브랜드 색상이 강조색을 대체합니다.
• 페이싱: 각 제목 라인은 나타난 후 약 2초 동안 유지되고, UI 순간은 실제 속도로 실행되며(초당 약 25자 타이핑), 각 결과 후 0.5초의 일시 정지가 있어 시청자가 읽을 수 있습니다.
• 금지 사항: UI 뒤의 복잡한 배경, 둘 이상의 강조 색상, 바운스 이징, 이모지, 큰 그림자, 유리 효과(glassmorphism) 남용, 조작된 지표 또는 사용 후기.

사운드

고양되고 부드러운 배경 음악, 100~110 BPM (부드러운 피아노 또는 플럭 코드, 오프닝 후 가벼운 타악기 진입, 클로저로 올라가는 리프트), 조용하고 따뜻하게. 작은 사운드 효과: 타이핑 중 키 틱, 부드러운 클릭, 완료된 단계당 가벼운 "틱", 큰 카메라 움직임 시 부드러운 우우슝, 엔드 카드에서 부드러운 차임. 음악은 잘 만들어진 제품 비디오의 배경처럼 자리 잡아야 하며, 주도해서는 안 됩니다.

페이지 빌드 방법

하나의 자체 포함 HTML 파일 (인라인 CSS 및 JS; 사용자가 제공한 경우에만 이미지). DOM + CSS 변환, SVG 또는 전체 화면 캔버스를 사용하여 그리기, 적합한 것을 사용하세요.

페이지 계약

• window.VIDEO = {w, h, duration} 및 window.seek(t), 시간의 순수 함수: 시간 t(초)에 대한 모든 요소를 설정합니다. CSS 전환이나 애니메이션, setTimeout, 이전 프레임의 상태를 사용하지 마세요. 모든 프레임은 순서에 관계없이 독립적으로 올바르게 렌더링되어야 합니다. seek 내부에서 레이아웃 측정(offsetLeft, measureText 등)은 괜찮으며, 결정적입니다.
• 무작위성(그레인, 파티클, 오디오 노이즈)은 시드 생성기를 사용하며, 절대 Math.random을 사용하지 않습니다.
• 기록이 필요한 모든 것(움직이는 물체를 따라잡는 카메라, 시뮬레이션)은 로드 시 한 번 구워집니다: 0에서 duration까지 1/240초 단계로 이동하고 값을 저장한 후, seek이 보간과 함께 다시 읽습니다. 루프의 경우 루프가 시작되는 상태에서 시뮬레이션을 시작합니다(스타일의 seam 규칙 참조).
• 루프: seek(t)는 t % duration을 사용합니다. seam에 걸쳐 있는 효과(착지 스쿼시, 사운드 테일)는 양쪽 끝에서 그리거나 믹싱됩니다.
• URL에 ?render가 포함된 경우: 컨트롤 없음, 미리보기 배율 없음; 스테이지는 정확히 w × h로 왼쪽 상단에 위치합니다. 없으면: 스테이지는 CSS로 창에 맞게 배율이 조정되고 미리보기 컨트롤이 표시됩니다.
• 폰트: 포함하세요. woff2 파일(Google Fonts 또는 브랜드)을 다운로드하고 base64 @font-face로 인라인으로 포함하여 렌더링이 조용히 대체되지 않도록 합니다. 무게 변형을 위해 가변 폰트를 사용하세요([email protected]).
• 레이어: 장면 레이어에 투명 배경을 제공하고 그 뒤에 하나의 스테이지 배경이 기본 색상을 제공하여, 나중 레이어가 이전 레이어를 실수로 숨기지 않도록 합니다. 절대 위치 지정 텍스트는 white-space: nowrap을 사용합니다.
• 속도: 큰 CSS filter: blur() 및 큰 흐릿한 그라데이션은 스크린샷을 찍는 데 매우 느립니다. 그라데이션과 글로우는 로드 시 한 번 캔버스에 그리고(또는 이미지로) 그걸 이동시키세요.

도우미: 다음을 붙여넣고 모든 것을 기반으로 빌드하세요

// 감쇠 스프링 단계 응답 0 -> 1. w = 속도 (8 느림, 14 보통, 22 빠름), z = 감쇠 (1 = 오버슈트 없음)
function spring(t, w = 14, z = 0.82) {
  if (t <= 0) return 0;
  if (z >= 1) return 1 - Math.exp(-w * t) * (1 + w * t);
  const wd = w * Math.sqrt(1 - z * z);
  return 1 - Math.exp(-z * w * t) * (Math.cos(wd * t) + (z * w / wd) * Math.sin(wd * t));
}
// 여러 번 대상을 변경하는 값, 각각에 스프링: track(start, [[time, value, w?, z?], ...]) -> f(t)
const track = (v0, keys) => t => { let v = v0, p = v0; for (const [tk, val, w, z] of keys) { v += (val - p) * spring(t - tk, w, z); p = val; } return v; };
// 정밀한 이즈 키프레임 (카메라 움직임에 가장 좋음): kf([[t0, v0], [t1, v1, easeFn?], ...]) -> f(t)
const kf = keys => t => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) { const [a, va] = keys[i - 1], [b, vb, e = ease] = keys[i]; if (t <= b) return lerp(va, vb, e((t - a) / (b - a))); } return keys[keys.length - 1][1]; };
const clamp = (x, a = 0, b = 1) => Math.min(b, Math.max(a, x));
const ease = x => (x = clamp(x), x < .5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2);   // easeInOutCubic
const lerp = (a, b, k) => a + (b - a) * k;
const seg = (t, a, b) => clamp((t - a) / (b - a));      // t가 [a, b] 구간에서 0..1 진행도
const rng = s => () => (s = (s + 0x6D2B79F5) | 0, s = Math.imul(s ^ (s >>> 15), 1 | s), s ^= s + Math.imul(s ^ (s >>> 7), 61 | s), ((s ^ (s >>> 14)) >>> 0) / 4294967296);

• 타이핑: 표시 문자열은 full.slice(0, n(t))이며 커서가 t에서 깜빡입니다. 카운트업: lerp(a, b, ease(seg(t, ...))) 형식.
• 카메라는 kf 또는 track으로 구동되는 transform: translate() scale() rotate()를 가진 래퍼 요소입니다.

사운드

• window.buildAudio(ctx)는 전체 사운드트랙(음악 + 효과음)을 시간 0부터 주어진 모든 AudioContext 또는 OfflineAudioContext에서 스케줄링하며, 시각 자료와 동일한 타임라인 번호를 사용합니다. 오실레이터, 필터링된 노이즈(시드 버퍼에서) 및 엔벨로프로 합성합니다. 사용자가 음악 파일을 제공한 경우 fetch + decodeAudioData로 로드하고, 비트 그리드를 해당 템포(측정)로 설정한 다음 효과음만 추가합니다.
• 미리보기 재생: 첫 번째 재생 시 사운드트랙을 버퍼로 한 번 렌더링한 다음, 스크러빙된 위치에서 재생합니다. 클록이 seek를 구동합니다:

let buf, ac, src, startAt = 0, offset = 0, playing = false;
async function play() {
  ac ??= new AudioContext();
  if (!buf) { const off = new OfflineAudioContext(2, Math.ceil(48000 * VIDEO.duration), 48000); await buildAudio(off); buf = await off.startRendering(); }
  src = ac.createBufferSource(); src.buffer = buf; src.connect(ac.destination);
  src.start(0, offset % VIDEO.duration); startAt = ac.currentTime; playing = true;
}
function pause() { if (!playing) return; offset += ac.currentTime - startAt; src.stop(); playing = false; }
function now() { return playing ? (offset + ac.currentTime - startAt) % VIDEO.duration : offset; }
(function loop() { seek(now()); requestAnimationFrame(loop); })();   // 스크러버가 offset을 설정 (일시 정지, 설정, 재생)

• 비트 시트를 스크립트 상단에 주석으로 넣으세요: 각 순간마다 시간, 발생 상황, 사운드에 대한 한 행.

3단계: 확인, 렌더링, 전달

작업 폴더에 한 번 설정

… (계속)