kinetic-reel

Kinetic reel

코드로 편집적이고 고에너지 모션 릴을 제작하는 방법입니다. "Work Reel ’26"(84초 포트폴리오 릴: Microsoft → UW–Madison Surgery → Enterprise RAG → trace finale)에서 추출되었습니다. 실행 가능한 template/(17초 데모, 모든 기법 사용)과 examples/work-reel-26/의 전체 작업 예제가 함께 제공됩니다.

작동 방식. 모든 프레임은 t의 순수 함수입니다. reel/index.html은 reel/cues.js(타임라인)와 reel/reel.js(ES 모듈: three.js 레이어, 2D 타입 캔버스, WebGL 포스트 패스)를 로드합니다. render.mjs는 headless Chrome을 구동하여 리뷰용 콘택트 시트, 스트립, 스틸을 렌더링하거나 모든 프레임을 병렬로 렌더링하며, ffmpeg이 MP4를 인코딩합니다. music/score.mjs는 동일한 cues.js에서 Node에서 스코어를 합성하여 모든 히트가 해당 프레임에 정확히 맞도록 합니다.

워크플로우

0. 스캐폴드

bash <skill-dir>/scripts/new_project.sh <project-dir>   # <skill-dir> = 이 SKILL.md가 있는 폴더

그런 다음 디자인 전에 references/style-guide.md(룩, 모션 어휘, 전환 카탈로그, 레이아웃 규칙)와 references/sound.md를 전체적으로 읽으세요. 긴 릴이 어떻게 구성되는지 알아보려면 examples/work-reel-26/reel.js를 훑어보세요.

1. 강조점 결정, 스토리보드 작성

• 무엇이 주도하고 각 파트에 얼마나 많은 시간이 할당될지 질문(또는 결정)하세요. 시청자는 비율을 주목합니다. Work Reel의 v2는 Microsoft가 약 60%를 차지하여 재조정이 필요했습니다. 해결책은 사람들이 좋아하는 부분을 자르는 대신 다른 챕터의 실행 시간을 추가하는 것이었습니다. 주도 파트는 약 35–40%를 목표로 하세요.
• 템플릿에서 STORYBOARD.md를 작성하세요: 시간 예산, 사실의 출처, 통일 장치, 샷당 한 행(헤드라인, 시각적 메커니즘, 전환 인, 사운드).
• 사실은 신성합니다. 제공된 출처의 수치만 사용하며, 각각 범위를 명시합니다("~180개의 자체 구축 사례", "320개의 이중 언어 프롬프트"). 설명적인 내용(도구 ID, 문서 ID, 예시 답변, AST)은 HUD에 SCHEMATIC으로 표시합니다. 보유하지 않은 차원별 데이터를 절대 그리지 마세요. 프로세스를 시각화하세요. 의료/임상 작업: 효능 주장 금지, 사실일 때 "개발 중 / 아직 검증되지 않음"이라고 표시하세요.

2. 빌드

• reel/cues.js: S(씬 시작), hits(중요한 모든 비트), CH(챕터 → 분할 진행 표시줄), dur. 120 BPM: 비트에 컷, 마디에 챕터 변경.
• reel/reel.js: 샷당 하나의 함수, sName(t). 각 함수는 전체 프레임을 그립니다: bg() → glShot(...)을 통한 GL 레이어 → 타입 및 도형 → hud(t, {...}). 키와 함께 SCENES에 샷을 등록하고, TR에 전환을 추가하거나(비트에 하드 컷을 위해 생략 가능).
• 그리는 모든 중국어 문자를 나열하는 CJK 상수를 유지하세요(글꼴은 서브셋으로 로드됨).

3. 각 샷을 여러 번 살펴보기

node render.mjs --sheet=1,4,7,10,13,15.5 --cols=3 --w=640 --out=out/check/sheet.jpg   # 키 프레임
node render.mjs --stills=10.4 --out=out/stills                                          # 전체 해상도 디테일
ffmpeg -ss 16.0 -t .6 -i out/reel.mp4 -vf "fps=10,scale=320:-1,tile=6x1" out/check/tr.jpg   # 인코딩에서 전환 확인

모든 이미지를 읽기로 열어보세요. 레이블과 선의 충돌, 통계 위의 통계, HUD 밴드 안의 텍스트, 컷에서 빈 프레임, 1600px 너비에서의 가독성, 각 전환이 무언가에서 시작하여 깔끔하게 끝나는지 확인하세요. 예산: 챕터당 시트, 밀집된 샷당 전체 해상도 스틸, 전환 유형당 스트립.

4. 스코어, 렌더링, 인코딩

node music/score.mjs && ffmpeg -y -i music/score.wav -af "highpass=f=30,equalizer=f=250:t=q:w=1:g=-2,loudnorm=I=-14:TP=-1.2:LRA=8" -c:a aac -b:a 192k assets/score.m4a
node render.mjs --frames --workers=4                                    # Mac GPU에서 ~8–40 ms/프레임: 분 단위가 아닌 초 단위
node render.mjs --encode --audio=assets/score.m4a --out=out/reel.mp4 --fps=30
# 웹용 복사본: ffmpeg -i out/reel.mp4 -vf scale=1600:900:flags=lanczos -c:v libx264 -preset slow -crf 23 -c:a aac -b:a 128k -movflags +faststart out/reel-web.mp4

스코어를 들을 수 없습니다: showspectrumpic과 섹션별 RMS로 확인하고 보고할 때 언급하세요. 오디오만 변경된 경우 재렌더링이 필요 없음: 리먹스(-map 0:v -map 1:a -c:v copy).

가장 중요한 규칙

1. 타입이 주인공입니다. 헤드라인에는 콘덴스드 디스플레이(Anton), 슬램에는 하나의 와이드 그로테스크(Archivo Black), 하나의 "목소리" 라인에는 이탤릭 세리프(Instrument Serif), 모든 레이블에는 모노(JetBrains Mono). 큰 영어 헤드라인, 이중 언어 청중을 위한 작은 중국어 주석.
2. 모든 샷에는 메커니즘이 있습니다. 단순한 단어가 아닌: 그리드 라우팅, 매트릭스 스캐닝, 상태 머신을 건너뛰는 토큰, 융합되는 목록, 게이트를 통과하는 패킷. 헤드라인이 이름을 지정하고 메커니즘이 증명합니다.
3. 비트에 동기화. 문자, 칩, 카운터, 컷은 hits에 위치합니다. 빠르게 들어오고(expo-out), 유지, 다음.
4. 연속성. 챕터 내에서는 하드 컷보다 쉐이프 연속성 전환(눈이 가는 요소를 통해 확대, 방금 켜진 것에서 아이리스)을 선호합니다. 하드 컷 + 임팩트는 챕터 슬램용입니다.
5. 노이즈 윙윗거림 없음. 챕터로 들어갈 때 키에 맞는 스웰, 내부에서는 조용한 음조 신호, 컷의 약 절반에서는 침묵.
6. 정직한 데이터(1단계 참조) 및 설명적인 모든 것에 SCHEMATIC 레이블.
7. 수학 보호. backOut()의 반지름은 0 아래로 내려갈 수 있음(캔버스 오류): circle/starburst/jelly는 이미 보호됨. 신시사이저에서 pow() 전에 로컬 시간을 ≥ 0으로 클램프하고 SVF f/q를 클램프하세요(둘 다 템플릿에 있음).

사이트 인트로로 릴 배송

Work Reel은 사이트의 시작 페이지로 배송됩니다: index.html이 릴을 전체 화면으로 재생하고 포트폴리오로 전환합니다. 패턴은 examples/site-intro/에 번들로 제공됩니다(index.html, css/intro-reel.css, js/intro-reel.js, HTTP Range 지원을 추가하는 Cloudflare Worker 포함):

• 사운드로 자동 재생 시도. 거부되면 뮤트로 재생하고 "탭하여 사운드 켜기" 펄스 표시. 이것도 거부되거나 prefers-reduced-motion이면 종료 화면을 "시작" 모드로 표시(재생이 주요 버튼).
• 재생 중: 릴의 HUD가 모서리를 차지하므로 상단 중앙에 작은 유리알 버튼. "Skip intro"는 릴과 함께 채워지는 링이 있습니다. 사운드 토글의 이퀄라이저 막대가 릴의 BPM에 맞춰 펄스. Esc는 건너뛰기, M은 음소거.
• 종료 화면: HTML로 릴의 문법. 모서리 브래킷, 드롭인 문자(Anton)로 이름, 모노 마이크로 타입, 분할 트레이스 바, 2D 도트 필드 버전의 파티클 지형, 라임 기본 CTA(호버 시 텍스트 롤, 광택, 자기적, 마디마다 펄스), 그리고 고스트 "watch again".
• 누른 컨트롤에서 라임 아이리스로 종료, 오디오 페이드 다운, 네비게이션.
• 두 가지 인코딩(1600×900 ~1.3 Mbps, 960×540 ~0.6 Mbps for phones / save-data), preload="auto", 포스터. HTTP Range(206)로 제공하지 않으면 탐색 및 Safari가 깨짐.