6초 키네틱 타이틀

Kinetic Title Drop

세 비트(beat)로 구성된 6초, 1920×1080 타입 전용 필름:

1. 첫 번째 큰 단어가 헤어라인 슬래시와 함께 프레임을 열고, 좌측 상단에 자리 잡습니다.
2. 두 번째 단어가 외곽선 형태로 드롭인(drop-in)된 후 악센트 색상으로 채워집니다.
3. 페이오프(payoff) 라인이 모션 스미어와 함께 오른쪽에서 휙 들어오고, 그 아래에 악센트 바가 나타납니다. 칩과 푸터가 페이드 인되고, 모든 요소가 유지되다가 깔끔하게 사라집니다.

이 템플릿은 HyperFrames 컴포지션입니다. 사용자가 브리프(brief)를 작성하면 스크립트가 템플릿에 적용하고, HyperFrames가 로컬에서 MP4를 체크하고 렌더링합니다. 텍스트는 실제 폰트로 측정되어 프레임을 채우도록 크기가 조정되므로, 짧은 단어와 긴 단어 모두 동일한 공간에 안착합니다.

필요 사항

• Node.js 22 이상, PATH에 FFmpeg.
• HyperFrames는 npx로 실행됩니다. 이 템플릿이 테스트된 버전으로 고정: npx --yes [email protected].
• 첫 번째 렌더링 시 헤드리스 Chrome을 다운로드합니다. render 명령어가 Chrome이 없다고 하면, 한 번 npx --yes [email protected] browser ensure을 실행하세요.
• cdn.jsdelivr.net에 네트워크 접근이 필요합니다. 이 CDN이 템플릿에 GSAP를 제공합니다. 차단된 경우 문제 해결 섹션을 참조하세요.

이 스킬의 폴더는 <skill>입니다: 이 SKILL.md 파일이 있는 폴더입니다.

단계

1. 카피(문구) 받기

추론할 수 없는 것은 모두 물어보세요. 각 필드에는 제한이 있으며, 스크립트는 제한을 초과하는 값을 거부합니다.

필드	설명	제한	좋은 예
line1	첫 번째 단어. 크게 열리고, 좌측 상단에 위치합니다.	10	Ship
line2	두 번째 단어. 외곽선으로 드롭인되고 악센트로 채워집니다.	6	it
line3	페이오프. 가장 큰 라인이며, 그 아래에 바가 있습니다.	12	today.
chip	작은 알약 모양, 우측 상단. 버전, 날짜 또는 상태.	24	v2.0 · Out now
metaLeft	푸터, 좌측. 몇 단어로 설명.	60	Release notes · 14 fixes
metaRight	푸터, 우측. 보통 URL 또는 핸들.	40	relay.example/changelog

작성 팁:

• line1과 line2는 상단 행을 공유하므로, 함께 하나의 구절의 시작처럼 읽혀야 합니다 ("Ship / it", "Notes / that", "Meet / the"). line3이 이를 완성합니다.
• 모든 텍스트는 대문자로 설정됩니다. 한 단어가 가장 잘 읽히며, line3은 짧은 두 단어일 수 있습니다.
• line1 + line2를 약 12자 이하로 유지하세요. 그렇지 않으면 페이오프 옆에서 상단 행이 작아집니다.
• 푸터는 약 2초간 유지되므로, 한눈에 파악할 수 있도록 하세요.

2. 색상 고르기

세 가지 헥스(hex) 색상: ground(배경), ink(텍스트), accent(외곽선, 채움, 바, 칩). 브랜드 색상이 있다면 사용하세요. 그렇지 않으면 프리셋에서 시작하세요:

프리셋	ground	ink	accent
Ember	#0f1013	#f5f4ef	#ff5b2e
Fieldnote	#f1ede4	#18201c	#2f6b4f
Cobalt	#0b1020	#eef1ff	#5b7cff
Paper	#fbfaf7	#111111	#e8462b
Lime	#101410	#f2f5ee	#b6f23a

ink는 ground와 강한 대비가 필요합니다. accent는 ground 대비 최소 3:1이 필요합니다. line2가 이 색상으로 그려지기 때문입니다. check 명령어가 두 가지를 측정하고 실패 시 알려줍니다.

3. 프로젝트 생성 및 브리프 적용하기

cp -r <skill>/template ./title-drop
cd title-drop

프로젝트에 1단계와 2단계의 필드를 사용하여 brief.json을 작성하세요:

{
  "line1": "Ship",
  "line2": "it",
  "line3": "today.",
  "chip": "v2.0 · Out now",
  "metaLeft": "Release notes · 14 fixes · 3 new features",
  "metaRight": "relay.example/changelog",
  "ground": "#0f1013",
  "ink": "#f5f4ef",
  "accent": "#ff5b2e"
}

그런 다음 템플릿에 적용하세요:

node <skill>/scripts/apply-brief.mjs . brief.json

이 명령어는 각 값을 템플릿의 선언된 변수(타입, 길이, 색상 형식)와 비교하여 검사하고, 문제가 있으면 모든 문제를 한 번에 나열합니다. 브리프를 수정하고 다시 실행하세요. 현재 값을 유지하려면 필드를 생략할 수 있습니다.

완성된 브리프 두 개가 <skill>/examples/에 있습니다.

4. 체크하기

npx --yes [email protected] check --json

check 명령어는 파일을 린트하고, 브라우저에서 재생하며, 시간에 따른 레이아웃을 측정하고 대비를 테스트합니다. "ok": true이고 findings가 없으면 준비된 것입니다. 렌더링 전에 모든 finding을 수정하세요. 카피 관련 finding:

• contrast_aa_failure: 색상 쌍의 대비가 너무 낮습니다. 제안된 suggestedColor를 사용하거나 더 어둡거나 밝은 음영을 선택하세요.
• text_box_overflow, clipped_text 또는 content_overlap: 값이 템플릿이 예상한 것보다 깁니다. 보통 푸터나 칩이 이웃과 겹치는 경우입니다. 값을 줄이세요.

finding을 무시하기 위해 템플릿 구조를 변경하지 마세요. 대신 브리프를 수정하세요.

5. 렌더링 전에 미리보기

npx --yes [email protected] snapshot --at 0.3,1.6,3.6,5.2 -o snapshots

이 명령어는 snapshots/ 폴더에 PNG 프레임을 작성합니다. 파일을 열고 오프닝 프레임, 두 번째 단어가 안착하는 장면, 마지막 유지 프레임을 확인하세요. 단어가 칩과 충돌하거나, 푸터가 바와 겹치거나, 악센트가 배경에서 사라지는지 살펴보세요.

6. 렌더링

npx --yes [email protected] render --quality delivery -o renders/title-drop.mp4

프로젝트의 package.json에는 npm run check 및 npm run render와 동일한 명령어가 있습니다. 빠른 테스트에는 --quality draft를, 더 부드러운 결과를 원하면 --fps 60을 사용하세요.

7. 전달하기

renders/title-drop.mp4 경로와 5단계에서 만든 스틸 이미지 하나를 함께 전달하세요. 다른 버전을 위해 어떤 필드를 변경해야 하는지 알려주세요: brief.json만 편집하고 3~6단계를 다시 실행하면 됩니다.

타임라인

시간 (초)	설명
0.00	line1이 이미 화면에 크고 중앙에 썸네일처럼 표시됨
0.00–0.42	악센트 헤어라인이 가로지르며 슬래시, 그 후 페이드 아웃
0.80–1.35	line1이 좌측 상단으로 이동
1.35–1.77	line2가 외곽선 형태로 드롭인
1.90–2.06	line2가 악센트 색상으로 채워짐
2.05–2.55	line3이 오른쪽에서 휙 들어옴
2.60–3.05	악센트 바가 line3 아래로 나타남
3.10–3.50	칩, 푸터, 모서리 마크가 페이드 인
3.50–5.45	유지
5.45–5.80	모든 요소가 짧은 블러와 함께 위쪽으로 사라짐

여러 버전 한 번에 렌더링하기

여러 변형(언어별, 제품별, 날짜별 등)을 렌더링하려면 브리프의 JSON 배열을 작성하고 한 번에 렌더링하세요. 각 객체는 전체 또는 부분 브리프이며, 이미 적용된 값 위에 병합됩니다:

npx --yes [email protected] render --batch variants.json --quality delivery -o "renders/{index}.mp4"

--batch는 렌더링마다 변수를 설정하므로, 각각에 대해 apply-brief를 실행할 필요가 없습니다. 출력 경로에는 {index}나 {line3}과 같은 플레이스홀더가 필요합니다. 그렇지 않으면 파일이 서로 덮어씁니다. 먼저 대표 브리프 하나로 check를 실행하고, 가장 긴 카피를 스냅샷에서 확인하세요.

문제 해결

• 렌더링이 멈추고 정적 프레임이 표시되거나 sub_timeline_script_failure 보고. GSAP가 로드되지 않았습니다. 네트워크가 cdn.jsdelivr.net을 차단하는 경우, 프로젝트에서 npm i [email protected]를 실행하고 node_modules/gsap/dist/gsap.min.js를 assets/vendor/에 복사한 다음, index.html의 <script src>를 assets/vendor/gsap.min.js로 변경하세요.
• 단어가 잘못된 폰트로 보임. 템플릿은 League Gothic과 JetBrains Mono를 사용하며, HyperFrames가 번들로 제공합니다. 폰트를 변경하려면 다른 번들 패밀리(npx hyperframes docs compositions로 목록 확인)를 사용하거나 @font-face를 추가하세요. 그렇지 않으면 check가 실패합니다.
• 색상이 변경되지 않음. 3단계의 apply-brief를 다시 실행하고 "Applied N values"가 출력되는지 확인하세요. CSS :root 색상을 편집해도 효과가 없습니다. 변수가 우선합니다.
• 다른 길이를 원하시나요? 6초로 유지하세요. 비트는 해당 시간 내에 맞춰져 있습니다. 루트 지속 시간을 늘리면 유지 시간만 길어집니다.

파일

• template/: HyperFrames 프로젝트 (index.html, hyperframes.json, package.json).
• scripts/apply-brief.mjs: 브리프를 검증하고 템플릿에 작성합니다. 의존성이 없습니다.
• examples/relay-v2/ 및 examples/fieldnote-beta/: 완성된 브리프 예제. Lookbk의 미리보기는 이들로 렌더링되었습니다.
• NOTICE.md: 이 스킬이 사용하는 타사 소프트웨어 정보.