Pixel Crew 릴
참고할 샘플은 projects/ai-delivery-team입니다(왜 효과적인지는 docs/REFERENCE-BREAKDOWN.md를 읽어보세요). 맵과 우리를 곤란하게 만든 규칙은 CLAUDE.md를 참조하세요.
1 · 스크립트 우선 (script.json)
효과적인 구조: 후크(≤5초) → N개의 동일한 비트(~각 3.5초) → 결말 → 키워드 CTA.
- 후크: 놀라운 숫자와 전체 시스템을 한 프레임에 담습니다("7명의 직원, 그중 인간은 없습니다").
- 각 비트: "역할은 a, b, c를 합니다." — 애니메이션화할 수 있는 세 가지 구체적인 명사.
- 결말: 인간의 한 가지 일(승인, 결정, 검토).
- CTA: "댓글로 KEYWORD를 남기면 … 보내드립니다" (키워드는
brand.keyword에 있음). lines는 2~4단어로 된 캡션 구로 작성합니다. 각 줄은 하나의 캡션이 됩니다.- 총 길이는 30
45초를 목표로 하며, 음성 속도 1.31.4로 Kokoro가 초당 약 3.5단어를 유지하도록 합니다. - 사용자에게 브랜드 핸들/승인자 이름/키워드를 모르는 경우 물어보세요. 그렇지 않으면
@yourhandle자리표시자를 유지하고 그렇게 알립니다.
2 · 스캐폴드
node scripts/new.mjs reel <이름>
python3 scripts/voice.py projects/<이름> # 먼저 타임라인을 잡고, 그에 맞춰 디자인
3 · 장면 (index.html + style.css + scenes.js)
- 각 스크립트 장면에 대해 하나의
<section class="scene">을 동일한 순서로 배치합니다(R.cuts()가 이를TIMING.scenes에 매핑합니다). - 각 직원 장면:
.head안에.step[data-step][data-label]+.title(크기는 ≤ 980px에 맞게 조정), 그리고 작업을 수행하는 하나 또는 두 개의.card. - 모든 장면에 고유한 강조 색상을 부여하고(
--accent: var(--rN)), 배경을 번갈아 사용합니다(is-paper,is-peri,is-lav,is-cobalt). - 모든 말하는 명사를 애니메이션화합니다:
R.pop(el, R.word(scene, line, "noun")),R.tick,R.type,R.grow,R.slam(도장용). data-icon,data-bot,data-burst,data-face,data-presenter자리표시자를 사용합니다.Sprites.hydrate()가 이를 채웁니다.R.captions(...)과R.register()로 끝내고, 인라인window.__timelines["main"]줄을 유지합니다.
4 · 확인 후 렌더링
node scripts/build.mjs projects/<이름> --no-voice --no-render --snap <장면당 한 번>
# projects/<이름>/build/snaps/contact-sheet*.jpg를 읽고, 수정하고, 반복합니다.
node scripts/hf.mjs lint projects/<이름>
node scripts/build.mjs projects/<이름> --no-voice # → renders/<이름>.mp4
MP4 자체를 확인합니다: ffmpeg -i renders/<이름>.mp4 -vf fps=1,scale=180:-1,tile=8x5 sheet.jpg
그리고 -af ebur128 (목표 ≈ −14 LUFS). 다음을 확인하세요: 빈 첫 프레임, 텍스트가 가장자리에 닿는 경우, Instagram UI 아래에 있는 요소, 동기화가 맞지 않는 자막.
교체
- 음성:
script.json → voice.voice(am_michael,am_puck,am_fenrir,af_heart,bf_emma, …) 또는 직접 녹음한 파일을build/voice.wav에 넣고voice.py --from-wav를 실행합니다. - 음악:
build/music-override.wav에 트랙을 넣습니다. - 호스트: 소유자의 캐리커처(
kit/brand.js,kit/avatars/)가[data-presenter]및[data-face]에 의해 자동으로 사용됩니다. 이미지 호스트는 너비로 크기를 조정하며(.is-img), 허리 위쪽입니다. 요청 없이 다른 캐릭터를 그리지 마세요.