UI 모션 릴은(는) 무엇을 하나요?
릴(reel)은 하나의 HTML 씬(scene)을 프레임별로 렌더링한 것입니다. 모든 애니메이션 값(셰이프 크기, 반경, 색상, 카메라 줌, 커서, 컨트롤)은 감쇠 스프링(damped spring)으로 시뮬레이션되며, 프레임 속도의 8배로 한 번에 미리 계산되므로 모든 프레임을 독립적으로 병렬 렌더링할 수 있습니다. 음악도 같은 타임라인에서 합성되므로 모든 비트, 클릭, 스와이프가 화면과 완벽하게 일치합니다.
포함된 구성 요소:
assets/engine/reel.js: 엔진 (스프링, 측정, 커서 스크립트, 카메라, 콘텐츠 블러 교체, 호버 및 프레스, 시크리스 루프, 오도미터 카운터, 아이콘 세트)assets/engine/score.js: 오리지널 루프 가능 트랙 (패드, 플럭 아르페지오, 베이스, 드럼, 라이저, 벨) 및 UI 사운드 디자인 (클릭, 스와이프, 타이핑, 디텐트, 스와이프)이며, OfflineAudioContext로 렌더링됨assets/template/index.html: 모든 상호작용 유형을 포함한 24초짜리 시작 씬: 행 호버가 있는 리스트, 슬라이더 드래그, 토글, 오도미터, 홀드-투-컨펌 링, 성공 알약, 요약 카드, 루프백scripts/setup.sh: 릴 폴더를 스캐폴딩합니다 (엔진 + 템플릿 + 스크립트 + node deps)scripts/render.mjs: 스틸 이미지, 오디오, 그리고 음악이 믹싱되고 음량이 정규화된 병렬 MP4 렌더링scripts/qa.mjs: 콘택트 시트, 로우 루프 이음새 확인, 전환 스트립, 음량 및 스펙트로그램references/api.md:Reel.define설정에 대한 전체 레퍼런스. 씬을 작성하기 전에 반드시 읽으십시오.references/craft.md: 모션 및 디자인 규칙과 이미 발생하여 수정된 실수들. 상태를 설계하기 전에 읽으십시오.references/score.md: 음악과 사운드 디자인을 구성하는 방법과, 들을 수 없는 믹스를 확인하는 방법references/examples/stockback.html: 이 스킬이 추출된 원래 60초, 14상태 릴 (핀테크 영수증-주식 앱). 콘텐츠 아이디어와 밀도 높은 안무를 위해 참고하십시오. 엔진 API 이전에 작성되었으므로 코드가 아닌 패턴을 복사하십시오.
워크플로우
-
먼저 제품을 파악하십시오. 제품의 사이트나 코드를 읽어 팔레트, 폰트, 로고, 그리고 스토리를 전달하는 5-8가지 모먼트(입력, "매직", 증거, 보상)를 찾으십시오. 실제 카피와 실제 데이터를 가능한 한 활용하십시오: 실제 숫자와 실제 로고가 릴을 더욱 신뢰감 있게 만듭니다. 사용자가 특정 스타일을 요청했다면, 제품 자체의 스타일보다 그것이 우선합니다.
-
마크업을 작성하기 전에 상태를 스크립팅하십시오. 각 상태에 대해 크기(w, h, radius), 채우기(팔레트 색상 중 3-4가지), 카메라 줌(프레임 높이 또는 너비의 약 80%를 채우도록), 지속 시간, 커서 동작을 결정하십시오. 전체 릴은 45-60초와 10-14개 상태를 목표로 하고, 티저는 20-30초와 5-7개 상태를 목표로 하십시오. 120 BPM에서 비트는 0.5초이고 마디는 2초입니다. 각 상태의 지속 시간을 0.5초의 배수로 만들고 주요 모먼트는 마디선(2초의 배수)에 배치하여 음악이 그 지점을 강조할 수 있게 하십시오. 지속 시간의 합이 정확히 전체 시간과 일치해야 합니다.
-
스캐폴딩.
bash ~/.claude/skills/ui-motion-reel/scripts/setup.sh <project>/video를 실행한 다음<project>/video/index.html을 편집하십시오. 릴에 엔진 기능이 필요하지 않은 한 엔진 파일은 수정하지 않은 상태로 두십시오. 필요한 경우 프로젝트의 사본을 변경하고 그 사실을 언급하십시오. -
references/api.md에 따라 씬을 빌드하십시오: 상태당 하나의.content블록(id="c-<id>",data-w/data-h는 해당 상태의 w/h와 동일), 커서가 대상으로 하거나 애니메이션하려는 모든 요소에 id를 부여한 다음,Reel.define({...})로 상태, 커서 이벤트, 사용자 정의 채널(슬라이더, 토글, 홀드, 스크럽) 및 내부 애니메이션을 위한 상태별update함수를 정의하십시오. -
스틸 이미지를 일찍, 자주 검토하십시오.
node render.mjs --stills 0,1.5,4,...를 실행한 후 결과를 확인하십시오(node qa.mjs --every 2로 콘택트 시트를 만드십시오). 각 상태의 안정 상태와 몇 가지 중간 변형 프레임을 확인하십시오. 스틸 이미지 렌더링은 몇 초면 끝나고, 60초에 6개 워커를 사용한 전체 렌더링은 약 1분 30초가 걸립니다. -
음악을 입히십시오.
score(진행, 주요 상태에서의 히트, 브레이크)와 씬 특화 사운드(타이핑, 디텐트, 카운터, 스와이프)를 위한sfx훅을 설정하십시오.node render.mjs --audio를 실행한 다음node qa.mjs를 실행하고 음량 라인과out/qa/spectrum.png를 읽으십시오(references/score.md참조: 들을 수 없으므로 숫자와 그림으로 믹스를 판단합니다). -
렌더링 및 QA.
node render.mjs --mp4 --with-audio --out <name>.mp4를 실행한 다음node qa.mjs --transitions --video out/<name>.mp4를 실행하십시오. 로우 루프 이음새가 1.000000인지 확인하고,transitions.png에서 회색 중간 변형이나 콘텐츠가 프레임 밖으로 나가는 부분을 살펴보고, 콘택트 시트를 다시 한 번 확인하십시오. -
전달 MP4(파일 전송 시 용량 문제가 있을 경우 720p 사본도 함께), 그리고 포함된 내용에 대한 간단한 목록: 상태, 상호작용, 음악의 역할을 포함하십시오. 오디오를 청취가 아닌 분석으로 확인했다는 사실을 사용자에게 정직하게 알리십시오. 리타이밍이나 테마 변경을 제안하십시오: 재렌더링은 저렴합니다.
절대 타협하지 않는 사항 (룩)
이것들이 릴을 템플릿이 아닌 디자이너의 작품으로 보이게 만듭니다. 각 항목에 대한 설명은 references/craft.md에 있습니다.
- 하나의 셰이프, 절대 컷 없음. 모든 상태는 동일한 요소가 크기, 반경, 채우기를 변경하는 것이며, 내부의 콘텐츠는 짧은 블러로 교체됩니다(엔진이 처리).
- 커서가 모든 변화를 유발합니다: 클릭, 드래그, 또는 길게 누르기. 진정한 시스템 응답(홀드 완료)이 아닌 한 상태가 스스로 변경되지 않습니다.
- 모든 곳에 스프링; 기껏해야 약간의 오버슈트만 허용됩니다(크기는 zeta 약 0.86, 색상과 카메라는 1.0). 바운시한 이징 금지.
- 카메라는 각 상태에 맞춰 조정되며, 마지막 프레임은 첫 프레임과 같아서 릴이 루프됩니다.
- 죽은 시간 없음: 모든 순간에 의미 있는 움직임이 있고, 커서는 약 1초 이상 기다리지 않습니다.
- 파티클 버스트, 글로우, 렌즈 플레어, UI 크롬의 그라디언트, 또는 일치하지 않는 아이콘 스트로크 금지(엔진의 아이콘 세트 사용: 하나의 24 그리드, 하나의 1.75 스트로크).
- 하나의 UI 타입페이스, 선택적으로 하나의 디스플레이 악센트(템플릿은 Geist와 Instrument Serif 이탤릭체를 짝지음). 제품에 자체 폰트가 있으면 그것을 사용하십시오.
성능 노트
- 60초 릴을 1080p60으로 렌더링하면 3,600프레임입니다. 6개 워커를 사용하면 Apple Silicon Mac에서 약 80-90초에 렌더링됩니다.
- 스크립트는 작업 완료 후
process.exit를 호출하는데, puppeteer가 Node를 활성 상태로 유지할 수 있기 때문입니다. 자체 스크립트를 작성하는 경우에도 동일하게 처리하지 않으면 긴 명령어가 멈춘 것처럼 보일 수 있습니다. - 큰 파일 업로드가 타임아웃되는 네트워크에서는 720p 사본도 내보내십시오:
ffmpeg -i reel.mp4 -vf scale=1280:720 -c:v libx264 -crf 25 -c:a aac -b:a 160k reel-720p.mp4(ffmpeg는node_modules/@ffmpeg-installer/*/ffmpeg에 있습니다).