포트폴리오 릴 (템플릿: "skill 2")

이 스킬은 하나의 설정 파일 promo.json으로 완성된 약 30초짜리 인트로 릴을 제작합니다. Canvas 장면이 헤드리스 Chrome에서 모든 프레임을 그리고, 사용자의 클립을 카드 안에서 재생합니다. 스톡 푸티지, AI 영상, 템플릿 서비스는 사용하지 않습니다. 구조는 참조 릴 skill2.MP4(TikTok 크리에이터 인트로)의 페이싱을 따릅니다. 기법만 복사하며, 영상, 대사, 이름, 핸들, 워터마크는 절대 복사하지 않습니다.

시간 (3개 섹션 기준)	장면
0-2.3초	머스타드 그라데이션, 두 개의 큰 부드러운 원이 슬라이드 인; `hook[0]`이 한 단어씩 타이핑되고, 이어 `hook[1]`이 크고 굵게 나타남
2.3-2.9초	흰색 원이 아래에서 위로 와이프; 아바타가 작은 노란색 디스크로 튀어나옴
2.9-6.4초	흰 배경의 프로필 히어로: 아바타가 큰 원으로 커지고(노란색 링 또는 노란색 듀오톤), 이어 별이 있는 아웃라인 `badge` 알약, `hello`가 한 단어씩, 얇은 막대로 구분된 `roles`, 그리고 흰색 원 안에 ↑가 있는 검은색 `button` 알약이 나타남. 화살표가 위로 쏘아지고 페이지가 스크롤됨
6.4-20.5초	라이트 그레이 배경에 부드러운 창문 그림자가 있는 섹션별 페이지(각 4.6초): 그라데이션 제목, 이어서 스크롤을 따라 부드럽게 떠오르는 1-3개의 둥근 카드. 비디오 재생, 사진은 천천히 확대. 세로형 카드는 높게, 가로형 카드는 넓게, 섞인 행은 엇갈려 배치
20.5-24.4초	왼쪽 아래에서 노란색 빛이 그라데이션 방향으로 퍼짐; `cta[0]`, 이어 `cta[1]`이 단어별로 나타남
24.4-30.3초	점에서 검은색 프로필 카드가 튀어나옴(아바타 또는 `logo`, `handle`, `name`, 최대 3개의 카운팅 `stats`, 두 개의 버튼). 커서가 첫 번째 버튼을 클릭하면 회색으로 변하고 `clicked`가 표시된 후, 카드가 3D로 뒤집혀 `back`을 보여줌

길이는 섹션 3개 기준 약 30초이며, 섹션당 ±4.6초, 긴 텍스트가 있으면 약간 더 길어집니다.

두 가지 UI: `"ui": "classic"` (기본값) 또는 `"app"`

app은 동일한 타임라인과 텍스트를 유지하지만, 모든 장면이 움직이는 메시 그라데이션 위의 현대적인 앱 화면으로 표현됩니다:

시간	`app` 장면
hook	유리 검색창이 `hook[0] hook[1]`을 타이핑; 결과 드롭다운에 사람(아바타, 이름, 역할)과 처음 두 섹션이 표시됨; 커서가 사람을 클릭
hero	클릭한 결과가 벤토 대시보드로 커짐(유리 타일들): 큰 사진 타일(이름과 핸들), 인사말 타일(배지, 하이라이터가 있는 `hello`, 역할 칩), `profile.stats`를 카운트하는 통계 타일, 커서가 클릭하는 `button` 타일, 섹션을 나열하는 타일
sections	가로 캐러셀, 섹션당 한 슬라이드: 큰 숫자, 제목, "n works", 상단에 진행 바. 작업은 기기 목업으로 표시: 가로 클립은 브라우저 창(신호등, 주소창 `site/section-title`)에, 세로 클립은 휴대폰에, 오른쪽에 계단식으로 배열
cta	채팅 화면: 입력 중 표시(점), 이어 `cta[0]`과 `cta[1]`이 사람의 메시지 버블로 도착(마지막 것은 강조 색상)
card	그라데이션 커버 배너가 있는 프로필 카드, 겹쳐진 아바타, 핸들, 이름, 카운팅 통계, 두 개의 알약 버튼; 커서가 Follow 클릭(컨페티), 이어 `profile.qr` / `profile.back`의 QR 코드(설치 시 `qrencode`로 생성)로 뒤집히며, 아래에 주소 표시

site(선택 사항)는 브라우저 목업에 표시될 주소를 설정하며, 기본값은 profile.back입니다. 모든 스타일과 효과는 두 UI에서 모두 작동합니다(app에서는 orbit과 ticker가 사용되지 않음).

스타일 및 효과

"style"은 색상 테마를 선택합니다. 다크 스타일은 미세한 그리드가 있는 어두운 페이지와(window 그림자 대신) 빛나는 카드를 사용합니다.

스타일	모습
`mustard` (기본값)	템플릿: 머스타드 옐로우 그라데이션, 흰색 히어로, 라이트 그레이 페이지, 검은색 알약, 파란색 버튼
`midnight`	인디고에서 블랙, 네온 시안과 바이올렛, 어두운 페이지, 빛나는 카드
`sunset`	피치에서 핑크, 따뜻한 흰색 페이지, 코랄 제목과 버튼
`amber`	검정에 가까운 배경 위의 골드(개발자 또는 포트폴리오 룩), 어두운 페이지, 앰버 알약과 버튼
`mint`	민트에서 틸, 흰색 페이지, 녹색 제목

"colors"는 스타일의 단일 색상을 재정의합니다.

모든 효과는 기본적으로 켜져 있습니다. "effects": {"ticker": false}로 하나를 끄거나, "effects": false로 모두 꺼서 평범한 템플릿 룩으로 만들 수 있습니다:

효과	기능
`bokeh`	부드러운 빛 입자가 그라데이션 장면에서 위로 떠다님
`shine`	큰 질문, 버튼, 프로필 카드 위로 빛이 스치고, 원 와이프에 에코 링, 버튼에 펄스 링
`marker`	이름 아래에 하이라이터가 스와이프됨(`text.highlight`가 단어를 선택하거나, 두 번째 단어 이후의 모든 것)
`orbit`	점선 링에 세 개의 점이 아바타 주위를 돎
`blur`	페이지 스크롤 중 세로 모션 블러
`labels`	각 섹션 제목 위에 "01 / 03", 아래에 그려지는 언더라인
`glare`	각 작업 카드가 안착된 후 대각선 플레어가 지나감
`ticker`	마감 라인 뒤로 스크롤되는 큰 아웃라인 태그(`text.tags`, 또는 roles 및 section titles)
`confetti`	버튼 클릭 시 스타일 색상의 컨페티 버스트
`grain`	필름 그레인과 모든 것 위의 부드러운 비네트

사용자가 선택할 수 있도록, 전체 렌더 전에 모든 스타일로 동일한 4개 순간을 렌더링합니다("스타일 보드"). promo.json의 사본에 render.mjs --times를 사용하고, 스타일만 다르게 설정하세요.

요구 사항: ffmpeg, Node 22+, Google Chrome 또는 Chromium (CHROME_PATH), numpy와 scipy가 있는 Python (PROMO_PY; promo.sh가 자동으로 찾음).

워크플로우

1. 릴에 필요한 것 수집

아바타: 얼굴과 어깨가 나온 세로 사진. crop: [x, y, size](픽셀)를 제공하여 얼굴이 원 안에 오도록 하고, 미리보기를 확인하세요. 배경이 복잡하거나 밝은 경우, "avatarStyle": "duotone"으로 템플릿처럼 노란색 위에 어두운 형상을 만들 수 있습니다.
섹션 (1-4): 각각 짧은 제목(2-4단어)과 1-3개의 클립: 비디오({"file", "at"}, at부터 5.5초 재생) 또는 사진. 사용자의 최고 작업을 사용하고, 다양성을 위해 세로와 가로를 섞으세요.
텍스트: 짧게 유지하세요.
- hook: 작은 한 줄과 1-2단어로 된 큰 질문.
- badge: 약 50자 이내의 슬로건.
- hello: "Hello, I'm …".
- roles: 2-4개의 짧은 역할.
- button: 버튼 레이블.
- cta: 두 줄의 마감 멘트.
프로필 카드: handle, name, 최대 3개의 stats, buttons, clicked, back. 실제 숫자만 사용하세요(사용자, 사용자 사이트 또는 프로필에서 가져옴). 문자열 값(예: "2023")은 카운팅 없이 그대로 표시됩니다.
언어: 크메르어의 경우 "lang": "km"으로 설정하고 자연스러운 크메르어를 작성하세요. Kantumruy Pro 글꼴이 포함되어 있습니다.
선택 사항: style, effects, logo(카드 원 안), colors, text.highlight, text.tags, music (+ musicStart), sfxDir.

2. 프로젝트 작성

프로젝트 폴더를 만들고 examples/creator-reel.json을 promo.json으로 복사한 후 편집하세요. 모든 키는 references/config.md에 설명되어 있습니다. 경로는 프로젝트 폴더를 기준으로 합니다.

3. 미리보기 (약 10초)

<skill>/scripts/promo.sh <project>/promo.json --preview

클립을 자르고 약 13개의 스틸을 out/<name>-preview.png로 렌더링합니다. 확인하세요:

아바타 크롭;
줄이 비좁지 않은지(긴 텍스트는 자동 축소);
각 섹션의 카드가 좋은 프레임을 보여주는지: at 변경;
프로필 카드의 숫자.

4. 렌더링 (약 2분; 백그라운드에서 실행)

<skill>/scripts/promo.sh <project>/promo.json --jobs 4

단계는 다음 순서로 실행됩니다: assets, plan, render, mix, encode. --from mix는 프레임을 다시 렌더링하지 않고 사운드만 리믹스합니다.

출력: out/<name>-1080p60.mp4 및 out/<name>-contact.png.

5. 전달 전 확인

연락처 시트를 확인합니다.
ffprobe로 build/cues.json에 표시된 길이가 나오는지 확인합니다. 믹스는 -14 LUFS / -1 dBTP로 노멀라이즈됩니다.
결과물의 소리를 들을 수 없으므로, 확인한 내용을 사용자에게 알리고 듣도록 요청하세요.

튜닝

타이밍: scripts/scene.mjs의 plan(). SEC는 한 섹션의 길이, SCROLL은 페이지 스크롤의 길이입니다. buildCues()의 큐는 자동으로 따라옵니다.
룩:
- 테마는 scene.mjs의 STYLES, 효과는 EFFECTS입니다. 색상은 colors에서도 가져올 수 있습니다.
- 카드 레이아웃은 layout()입니다.
- 창 그림자는 buildShade()입니다.
- 뒤집기는 원근감 있는 스트립으로 drawFlip()입니다.
사운드: scripts/audio.py의 SFX는 sfxDir에서 시도할 파일명을 나열합니다. make_bed()는 로파이 비트입니다.

포트폴리오 릴