릴 모션 그래픽은(는) 무엇을 하나요?
이 스킬은 "Upcycling in 30 Seconds"를 위해 처음 구축된 하우스 스타일로 릴을 제작합니다. template/은 작동하는 HyperFrames 프로젝트로서의 해당 릴이므로, 아무것도 변경하기 전에 새 복사본이 올바르게 렌더링됩니다. 여러분의 작업은 모든 아래 규칙을 유지하면서 그 콘텐츠를 새 스크립트의 내용으로 교체하는 것입니다.
컴포지션 HTML을 작성하기 전에 /hyperframes-core를 로드하여 컴포지션 계약을 확인하세요. references/primitives.md에 없는 모션 패턴이 필요한 경우에만 /hyperframes-animation을 로드하세요.
1. 스크립트를 읽고 비트 계획하기
다음 정보를 수집하거나 추론하고, 영화를 변경하는 것에 대해서만 질문하세요:
- 스크립트 또는 개념. 필수.
- 발표자 푸티지(MP4) 또는 스틸 이미지. 없으면 템플릿의 플레이스홀더 스틸을 유지하세요.
- 출처 표시 타이틀 아이브로우용, 예:
ICLR 2023 · 저자 et al.. - 대상 길이. 기본 30초, 20~60초도 가능.
스크립트를 다음으로 나누세요: 타이틀 카드(약 4초), 2~5단계(각 4.5~6초), 선택적 결과/마무리(약 5.5초). 각 단계에 대해 다음을 작성하세요:
- 제목: 일반 단어와 1~2단어 기울임꼴 악센트("MLP 복사 여덟 번"), 656px, 60px에 맞도록 최대 약 22자;
- 캡션: 1행은 최대 약 34자의 한 문장(Bodoni 기울임꼴 40px), 2행은 최대 약 40자의 지원 문장;
- 다이어그램 이동: 프리미티브 어휘에서 (
references/primitives.md→ "새 다이어그램 작성").
캡션이 나레이션을 반영하는 경우 초당 약 2.5단어로 속도를 조절하세요. 계획을 프로젝트의 STORYBOARD.md에 작성하고(비트, 시간 범위, 제목, 캡션, 시각적 이동), 사용자에게 보여주고 승인을 받은 후 빌드하세요. 이미 사용자가 승인한 짧은 스크립트는 바로 빌드 단계로 넘어갈 수 있습니다.
2. 스캐폴드
이 스킬은 Reel Creator 프로젝트(.claude/skills/reel-motion-graphics/)에 있습니다. 프로젝트 루트에서 명령을 실행하고 모든 새 릴은 reels/<slug>/에 배치하세요. 아래와 같은 scripts/solve-fold.py 등의 스크립트 경로는 이 스킬 폴더 기준입니다.
.claude/skills/reel-motion-graphics/scripts/new-reel.sh reels/<slug> [presenter.jpg|.mp4]
발표자 비디오의 경우 index.html에서 <img id="presenter">를 다음으로 교체하세요:
<video id="presenter" class="clip" src="assets/presenter.mp4" data-start="0" data-duration="<D>" data-has-audio="true" playsinline></video>
#presenter CSS(cover, 20% 앵커, --fold 아래)는 변경 없이 적용됩니다.
3. 빌드: 먼저 데이터를 편집한 다음 다이어그램 작성
| 파일 | 변경할 사항 |
|---|---|
index.html | 루트 및 호스트 data-start/data-duration을 계획과 일치하도록 수정. 호스트: bg(전체), title(0–4), headings 및 diagram(4–종료), result(해당 윈도우), captions(전체), presenter(전체). |
compositions/title.html | 아이브로우 크레딧, 두 개의 디스플레이 라인, 두 개의 테제 라인, 그리고 아이디어가 "1 → 다수"가 아닌 경우 미니 다이어그램. |
compositions/headings.html | STEPS 배열만 (호스트-로컬 초). 막대와 "Step n of N"은 이것으로부터 파생됩니다. |
compositions/captions.html | CAPS 배열만 (전역 초). 각 단계 시작 후 약 0.35초에 진입하고 단계 종료 시 떠납니다. |
compositions/diagram.html | 프리미티브를 사용하여 새 주제에 맞게 세계를 재작성. lens/world/drift 구조, token-clock 패턴 및 배경 후퇴를 유지. |
compositions/result.html | 통계 레이블, 값, 카운터 및 메타 라인을 수정하거나, 스크립트에 숫자가 없으면 호스트를 삭제. |
compositions/bg.html | 일반적으로 변경되지 않음. yoyo 반복 횟수를 루트 지속 시간에 맞게 조정. |
라이브러리에 적합한 그래픽이 없을 때: HyperFrames 링크 요청
라이브러리는 references/primitives.md입니다. 어떤 비트에 프리미티브로 커버되지 않는 시각적 요소(차트 유형, 지도, 타임라인, 비교 또는 기타 나열되지 않은 모든 것)가 필요한 경우, 처음부터 즉흥적으로 만들지 마세요. 잠시 멈추고 사용자에게 링크를 요청하세요:
"비트 3('수익이 2021년 이후 세 배로 증가')에는 성장 차트가 필요하지만 라이브러리에 없습니다. 마음에 드는 그래픽의 HyperFrames 카탈로그 링크를 보내주실 수 있나요? 브랜드에 맞게 리스타일링하겠습니다."
사용자가 선택할 수 있도록 npx --yes [email protected] catalog "<키워드>"에서 2~4개의 후보를 나열할 수 있지만, 사용자가 선택하도록 하세요. 기다리는 동안 다른 비트를 계속 빌드하고, 틈에 레이블이 지정된 플레이스홀더를 남겨두세요.
링크가 도착하면:
- 설치. 카탈로그 링크의 마지막 경로 세그먼트가 레지스트리 항목 이름입니다. 프로젝트에서
npx --yes [email protected] add <name> --no-clipboard --json을 실행하세요. 레지스트리에서 가져오지 않은 링크의 경우 페이지나 소스를 읽고 다시 빌드하세요. - 하우스 규칙에 맞게 리스타일링:
- 색상을 브랜드 토큰으로, 패널을
.glass로 교체; - opsz-18 파일과 함께 Bodoni 및 Instrument Sans 사용;
- 모든 간격 값을 4px 그리드에 배치;
- 콘텐츠 열과 영역에 맞게 조정;
- 광택, 윤기 및 드리프트 악센트 추가;
- 평평한 밝은 채우기, 다른 글꼴 또는 드롭 섀도 스타일 등 브랜드에 맞지 않는 것은 제거.
- 색상을 브랜드 토큰으로, 패널을
- 연결 그래픽 트랙의 하위 컴포지션 호스트로 연결하거나, 연속적인 세계를 공유해야 하는 경우
diagram.html에 모션을 통합. 그런 다음 확인, 스냅샷 및 수정. - 라이브러리에 추가.
references/primitives.md에 "HyperFrames에서 리스타일링됨" 아래에 항목을 추가: 이름, 소스 링크, 표시 내용 및 주요 매개변수. 리스타일링된 파일을template/compositions/library/에 복사하여 다음 릴에서 다시 묻지 않고 재사용할 수 있도록 합니다.
4. 하우스 규칙 (모든 릴, 예외 없음)
- 접힌 부분 등거리 유지. 접힌 부분은 가장 낮은 애니메이션 콘텐츠(캡션 하단, 약 y 900)와 발표자 머리 상단 사이의 중간에 위치합니다.
scripts/solve-fold.py <발표자 스틸 또는 프레임> 900으로 해결하고brand.css에서--fold를 설정합니다(4의 배수).scripts/measure-fold.py <스냅샷> <fold>로 확인하세요. 비디오의 경우 머리가 가장 높은 프레임을 확인하세요. - 4px 그리드. 모든 패딩, 갭, 오프셋, 크기 및 줄 높이는 4의 배수입니다. 컨테이너는 균일하게 패딩되고 콘텐츠에 맞게 크기가 조정됩니다. 카드에 고정 높이를 절대 지정하지 마세요.
scripts/audit-grid.sh <프로젝트>를 실행하세요. 허용되는 유일한 예외는 가는 테두리, 글로우 반경 및 트윈 모션 오프셋입니다. - 튼튼한 세리프.
fonts/에 있는*-opsz18.woff2Bodoni 파일만 사용하세요. 가변 글꼴의 자동 광학 크기는 H.264 및 전화 다운스케일링 후 사라지는 가는 디스플레이 컷을 선택합니다. 가변 파일 또는 Google의 6..96 범위로 다시 전환하지 마세요. - 영역. 앱 바 0–175(비워둠), 애니메이션 192–780, 캡션 대역 812–904, 발표자는
--fold아래, 콘텐츠 열 x 172–828(오른쪽 레일에서 비움). 캡션은 하나의 트랙에만 있습니다. - 하나의 연속적인 다이어그램 세계. 단계에 걸쳐 지속되는 요소는
diagram.html에 있으며 이동합니다. 새 장면 파일로 다시 진입하지 않습니다. - 결정론.
window.__timelines["<id>"]에 등록된 일시 중지된 GSAP 타임라인만 사용하세요.Math.random대신 시드된rng()또는hh()를 사용하고,requestAnimationFrame, 클록 또는 네트워크를 사용하지 마세요. 애니메이션 카운터 및 입자는 프록시 트윈 값의 순수 함수입니다. - 린트-세이프 제작.
document.querySelector('[data-composition-id="<id>"]:not([data-composition-src])')로 하위 컴포지션 자체 루트를 대상으로 지정하고, 절대#root를 사용하지 마세요(여러 루트가 한 번 조립되면 해당 id를 공유함).- 요소 id에 컴포지션 접두사를 붙이세요(
dg-,hd-,rs-,ti-). - 요소-속성 쌍당 하나의
fromTo를 사용한 다음to를 사용하세요. letterSpacing,width,height,top또는left를 트윈하지 말고 변환 및 불투명도를 사용하세요.- 단일 레이블이 정지 상태에서 겹치지 않도록 엇갈리게 배치하세요.
- 룩. 거의 검은색 따뜻한 배경에 떠도는 빛과 그레인, 모든 패널에
.glass, 악센트에 금색 광택, 모든 홀드에 작은 카메라 드리프트, 각 완료된 상태를 최소 1초 동안 유지.
5. 확인 후 전달
프로젝트 디렉터리에서 다음을 실행하세요:
npx --yes [email protected] check
npx --yes [email protected] snapshot --at <각 비트의 중간 지점>
check는 오류 0으로 통과해야 합니다. 경고를 검토하세요.- 연락처 시트를 살펴보세요. 조밀한 프레임을 자르고 확대하여 겹침, 잘린 텍스트, 대상에서 벗어난 토큰 및 고르지 않은 패딩이 있는지 확인하세요.
measure-fold.py와audit-grid.sh를 실행하고 플래그가 지정된 모든 것을 수정하세요.npx --yes [email protected] render로 렌더링하고 결과는renders/에 저장됩니다. 휴대폰 시청을 위해 30MB 미만의 공유 복사본을 만드세요:ffmpeg -i renders/<file>.mp4 -c:v libx264 -crf 23 -preset slow -pix_fmt yuv420p -movflags +faststart renders/<slug>-share.mp4- 라이브 플레이어: 프로젝트 루트에서
node viewer/build.mjs를 실행하세요. 모든 릴의 라이브 플레이어(reel/및 각reels/<slug>/)를 다시 빌드하고 캐러셀viewer/index.html을 작성하며, 각 릴당 하나의 복사본이viewer/reels/에 생성됩니다.viewer/index.html을 릴 라이브러리 아티팩트 https://claude.ai/artifact/Joet84qdr6Kb47vYZzc8YR에 게시하고,files에 있는 모든viewer/reels/*.html을 전달하세요. 사용자는 임베디드 비디오보다 라이브 HTML 플레이어를 선호합니다. 단일 릴의 경우 해당 폴더에서node build-preview.mjs를 실행하면dist/preview.html이 작성됩니다. - 런타임, 확인된 사항(프레임, 접힌 부분 간격, 감사), 아직 확인되지 않은 사항을 보고하세요.
참고
references/primitives.md: 구현 파일과 함께 모든 시각적 빌딩 블록.template/: 완전한 Upcycling 릴. 이것이 품질 기준입니다. 새 작업을 이와 비교하세요.