ClaudinNarsis/claude-video-skills

매력적인 설명 영상

끊김 없는 시각적 스토리입니다. 하나의 영웅 요소(참조 스타일에서는 토글 스위치의 손잡이로 시작하는 흰색 공)가 작은 인터페이스 '스테이션'들을 통과하며 이동하고, 각 스테이션은 영웅에 반응합니다. 영웅은 슬라이더를 따라 굴러가며 100까지 밀어 올리고, 끝에서 떨어져 알림 스택을 튕기며 내려오고(통과할 때마다 알림이 나타남), 키보드에 착지하여 키를 튕기며 단어를 입력한 후, Return 키를 눌러 다시 공중으로 발사됩니다. 카메라는 절대 컷하지 않습니다. 영웅을 화면 중앙 근처에 유지하고 각 상호작용에 맞춰 줌인하며, 클라이맥스에서는 멀리 확대되어 시청자가 전체 코스를 한눈에 볼 수 있게 한 후, 다시 시작 지점으로 돌아옵니다.

제품의 경우, 스테이션은 하나의 캔버스에 공간적으로 배치된 워크플로우의 단계들이며, 영웅은 그 워크플로우를 통해 이동하는 대상입니다. 확대 시점은 "이제 어떻게 작동하는지 이해했군"이라는 순간입니다.

이 모든 것은 하나의 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~6단계로 요청하세요. (사용자가 하는 일 → 제품이 하는 일 → 결과). 사용자가 URL을 제공했다면 사이트에서 유추하세요.

이 스타일의 기본 길이: 12초, 끊김 없는 루프. 범위 10~30초 (더 길다는 것은 스테이션이 더 많다는 뜻이지, 스테이션 속도가 느리다는 뜻이 아닙니다).

2단계: 코스 설계, 그리고 구축

1. 영웅 선택

영웅은 제품의 스토리에 관한 하나의 단순하고 읽기 쉬운 객체이며, 절대 사라지거나 교체되지 않습니다(잠시 모양이 바뀔 수는 있지만, 다시 돌아옵니다): 공/손잡이(기본값, 모든 것에 적합), 텍스트 커서 또는 포인터, 파일 또는 문서 타일, 메시지 버블, 코인 또는 주문, 데이터 포인트. 영웅은 스테이션의 인터페이스에 자연스럽게 맞아야 합니다(손잡이, 엄지, 키 캡, 핀 등).

2. 워크플로우를 스테이션에 매핑

각 단계는 하나의 스테이션이 됩니다: 영웅이 물리적으로 상호작용하고 그로 인해 시각적으로 변하는 작은 실제 인터페이스 요소입니다. 다음 메커니즘에서 가져오세요:

메커니즘	영웅은...	스테이션 반응
토글 / 버튼	손잡이가 되거나 누름	켜지고, 색상이 채워짐
슬라이더 / 진행률	엄지로 굴러감	툴팁에 값이 올라가고, 트랙이 채워짐
알림 스택	각 카드에 떨어져 튕김	각 카드가 히트될 때 나타나며, 스토리를 설명하는 메시지 표시
키보드 / 입력	키를 튕기며 이동	각 키가 눌리고, 위 입력란에 글자가 나타남
목록 / 테이블	행을 따라 미끄러짐	각 행이 강조 표시되거나, 체크 표시되거나, 정렬됨
차트	선의 선두 점이 됨	선이 뒤에 그려지고, 영웅이 지나갈 때 막대가 올라감
채팅	버블을 타고 들어옴	답장이 타이핑됨
배포 / 전송 버튼	버튼에 의해 발사됨	토스트나 URL이 나타남

스테이션 레이블과 메시지는 각각 몇 단어로 스토리를 전하며 약간의 재치를 더합니다(참조에서는 Slider · Reached 100, Gravity · Something is falling, Messages · What now?를 사용한 후 retry를 입력합니다). 제품의 경우 실제 워크플로우에서 가져와서 작성하세요 (예: 코딩 도구: 프롬프트 입력 → Agent · Writing 12 files → 진행률 → Preview · Ready → 배포 누름 → Live at myapp.app).

3. 세상 배치

스테이션을 하나의 큰 캔버스(프레임의 약 3배 크기)에 영웅이 방문하는 순서대로 배치하여 경로가 지그재그(위쪽을 따라 오른쪽으로, 중간을 따라 아래로, 아래쪽을 가로질러)가 되도록 하세요. 중력이 말이 되도록 하세요: 떨어짐은 아래로, 발사는 위로. 각 스테이션의 위치는 전체 비디오 동안 고정하세요. 세상은 어두운 캔버스에 희미한 도트 그리드가 있으며, 이 그리드는 카메라와 함께 움직입니다(그리드가 카메라 움직임을 읽기 쉽게 만듭니다).

4. 영웅의 경로 스크립팅

영웅의 위치는 시간의 순수 함수이며, 접촉 지점(각 접촉은 비트에 있음) 사이의 세그먼트로 구축됩니다:

• 구르기/미끄러짐 스테이션을 따라: 위치는 트랙을 따라 ease 또는 스프링으로 결정되며, 스테이션의 값은 영웅의 위치에서 파생됩니다.
• 점프와 낙하 접촉 지점 사이: 포물선(x는 시간에 따라 선형, y = y0 + v·t + ½·g·t², 비트에서 다음 접촉 지점에 착지하도록 v를 계산). 중력 상수는 전체 비디오에 걸쳐 일정합니다.
• 충돌: 접촉 시 스쿼시(약 60ms 동안 1.25 × 0.8 배율, 스프링으로 복귀), 비행 중 속도 방향으로 스트레치(최대 1.15 × 0.9), 그리고 맞은 대상에 약간의 아래쪽 밀림 추가.
• 발사: 마지막 스테이션은 영웅을 위로 그리고 다시 시작 지점을 향해 긴 호를 그리며 발사하고, 그 뒤로 모든 스테이션이 역순으로 리셋됩니다 (값이 내려가고, 알림이 사라지고, 입력이 지워짐) 그래야 루프가 닫힙니다. 발사 호를 슬로우 모션으로 실행하세요: 먼저 원하는 정점 높이(코스의 상단)를 선택하면, 중력 하에서 실제 비행 시간이 결정됩니다. 그런 다음 비행이 공개 창을 채우도록 시간을 왜곡하고, 정점에서 가장 느리게 합니다(종종 그곳에서 5~10배; 예를 들어 호에서 속도 1 − 0.9·sin(πu)^0.6). 스테이션 리셋은 공개 홀드 중에, 발사 순간이 아니라 시청자가 전체 코스를 본 후에 예약하세요.
• 이음매: 루프 지점을 첫 번째 스테이션에 영웅이 착지하는 곳으로 설정하세요. seek(기간)은 seek(0)과 정확히 동일하게 보여야 합니다. 착지 스쿼시와 키 누름도 시간 0에 표시됩니다. 사운드의 경우, buildAudio 내에서 사운드트랙을 자체적으로 약간 더 긴 OfflineAudioContext로 렌더링하고, 기간을 넘는 꼬리를 시작 부분에 접어서 재생한 다음, 해당 버퍼를 주어진 컨텍스트로 재생하세요.
• 중력은 측면입니다. 스테이션을 측면에서 낙하가 말이 되도록 배치하세요: 알림 카드는 계단을 형성하고(각 카드는 너비보다 더 많이 옆으로 오프셋되어 영웅이 카드를 통과하지 않음), 키보드는 정면에서 보이며 영웅이 작은 호를 그리며 키 사이를 뛰어다닙니다.
• 빈 슬롯: 영웅이 스테이션의 일부(손잡이, 엄지)였다가 떠날 때, 스테이션은 영웅이 떠난 슬롯의 희미한 윤곽을 유지하며, 영웅이 돌아올 때 다시 채워집니다.

5. 카메라

카메라는 어려운 부분입니다. 다른 모든 것을 다듬기 전에 이 부분을 먼저 제대로 해결하세요.

• 따라가기: 카메라 대상 = 영웅 위치(속도의 약 0.15초 리드 포함)와 현재 스테이션의 고정 앵커의 혼합으로, 임계 감쇠 스프링(w ≈ 6)으로 부드럽게 처리되어 충돌 시 절대 급격하게 움직이지 않습니다. 상호작용 중에는 앵커에 약 0.7 가중치(스테이션이 프레임에 유지됨), 낙하 및 점프 중에는 0.15(영웅이 리드함), 페이오프 홀드에서는 0.85를 부여합니다. 이 부드러움 처리에는 기록이 필요하므로, 로드 시에 굽습니다(페이지 계약 참조), 시간 0에서 첫 번째 스테이션의 고정 프레임으로 시작하여 처음 0.8초 동안 추적으로 혼합됩니다. 영웅은 프레임의 중간 절반을 절대 벗어나지 않습니다.
• 줌: 각 상호작용 중에는 조밀하게: 스테이션이 프레임 너비의 약 절반을 채우고 영웅은 화면에 50~70px(1080p 기준). 낙하 및 점프 중에는 약간 더 넓게, 다음 스테이션이 이미 보이도록 합니다. 빈 캔버스가 아닌 스테이션을 프레임에 담으세요.
• 페이오프 홀드: 발사 전에 최종 결과(토스트, 라이브 URL)를 0.4~0.6초 동안 프레임에 완전히 담아 유지하세요.
• 공개: 발사 시, 카메라는 추적을 멈추고 전체 코스를 담는 고정 프레임(약 0.3배율)으로 부드럽게 전환되며, 약간의 3D 기울기(perspective + rotateX 15~25°)로 깊이를 더합니다. 영웅이 그 위를 호를 그리는 동안 약 1초간 유지하고, 영웅을 확대하고 부드러운 후광을 주어 화면에서 가장 밝고 눈에 띄는 대상(최소 24px)으로 만드세요. 그런 다음 첫 번째 스테이션의 고정 프레임으로 다이빙하여, 카메라가 도착할 때 영웅이 그곳에 착지하도록 시간을 맞추고, 다시 추적으로 혼합하세요.
• 실제 모션 블러: 영웅과 세상은 빠른 움직임에서 번짐이 생깁니다. 이것이 스타일의 일부입니다.

외형

• 기본 팔레트(어두운 iOS 스타일): 캔버스 #0C0C0E, 도트 그리드 #1E1E22, 표면 #1C1C1F / #2C2C2E, 텍스트 #F2F2F7, 보조 #8E8E93, 악센트 #0A84FF, 영웅 흰색 #FFFFFF. 브랜드 색상이 악센트를 대체하고, 영웅은 화면에서 가장 밝은 대상으로 유지됩니다. 브랜드가 밝은 경우 밝은 변형(캔버스 #F2F2F4, 영웅 = 악센트)도 괜찮습니다.
• 실제 같은 시스템 UI: 토글, 눈금이 있는 슬라이더, 앱 아이콘 사각형, 제목, 본문 라인 및 now가 있는 알림 카드, 키 캡과 Return 키가 있는 키보드. 폰트: SF 스타일(Inter 또는 Geist).
• 체인을 시작하는 커서가 있을 수 있으며(첫 번째 스테이션을 클릭) 그 후에는 사라집니다.
• 금지 사항: 컷, 페이드 투 블랙, 무슨 일이 일어나고 있는지 설명하는 텍스트 오버레이(스테이션 자체 레이블만 유일한 텍스트), 하나 이상의 영웅, 반응하지 않는 스테이션, 뜨는 것처럼 보이는 물리.

사운드

110~120 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이 보간과 함께 값을 다시 읽도록 합니다. 루프의 경우, 루프가 시작되는 상태에서 시뮬레이션을 시작합니다(스타일의 이음매 규칙 참조).
• 루프: seek(t)는 t % duration을 사용합니다. 이음매에 걸친 효과(착지 스쿼시, 사운드 꼬리)는 양쪽 끝에서 그려지거나 혼합됩니다.
• 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));      // 구간 [a, b]를 통한 t의 0..1 진행률
const rng = s => () => (s = (s +

…

[번역을 위해 잘림]