Motion Lab

Motion Lab은(는) 무엇을 하나요?

지시된 모션 작품: 모든 형용사는 숫자가 되고, 모든 후속 조치는 측정된 노트가 되며, 영화는 실제 작동하는 모습을 보여줍니다. 참조 빌드: 이 스킬의 examples/cofoundr/ 폴더 (SPEC.md, compositions/, REVIEW.md, preview.mp4). 세션에서 첫 번째 빌드를 시작하기 전에 읽어보세요.

렌더 계약을 위해 hyperframes를 로드한 후 다음 단계를 따르세요. hyperframes 규칙은 형식 측면에서 우선하며, 이 스킬은 스토리, 비주얼 및 프로세스 측면에서 우선합니다.

1. 소스 읽기

무엇을 쓰기 전에, 주제 자체를 읽으세요: 리포지토리, README, 주요 경로 또는 파이프라인 파일, 가격 책정, 라이브 사이트. 다음을 추출하세요:

• 매커니즘: 실제 단계 순서(함수 이름, API 호출, 단계).
• 실제 숫자: 데이터셋 크기, 개수, 가중치, 타이밍, 제한. 절대 임의로 만들지 마세요. 소스가 제공하지 않는 값은 삭제하거나 REVIEW.md에서 예시(illustrative)로 표시하세요.
• 브랜드: 강조 색상(accent hex), 보조 색상, 로고 SVG, 폰트, 모든 스타일 잠금 파일.
• 개발자가 인용할 만한 놀라운 세부 사항 하나 (클램프, 폴백 체인, 출시된 버그).

사용자가 소스에서 사용하지 않는 기술(스폰서, 트윗의 도구)을 언급하면, 그리지 마세요. 그렇게 말하고 그것이 무엇을 하는지 물어보세요.

2. SPEC.md 작성 (지시된 프롬프트)

막연한 프롬프트("멋지고, 프리미엄이며, 현대적인")는 다크 네이비, 글로우 링, 파티클 및 만들어진 태그라인을 생성합니다. 지시된 프롬프트는 영화를 만듭니다. references/spec-template.md에서 프로젝트 루트에 SPEC.md를 작성하세요. 각 줄은 숫자입니다:

• GOAL, OUTPUT (기본값 1080x1080, 60 fps for X), TIME (초 x 60 = 프레임).
• LOOK: 배경(ground), 잉크(ink), 뮤트(muted ink), 규칙 색상, 강조색 및 그 의미, px 크기 및 자간( tracking)이 있는 디스플레이 및 본문 폰트, 카드 반경 및 그림자.
• OBJECTS: 시청자가 인식해야 하는 모든 사물, 실제 제품 UI에서 가져온 것.
• MOTION: 역할별 이징(eases), 프레임 단위 지속 시간 및 스태거 (references/numbers.md).
• SHOTS: 프레임 범위, 각각 하나의 히어로 무브, 시청자가 읽는 내용, 다음 샷으로의 전환.
• BANNED 및 QA (확인할 프레임과 각각이 보여줘야 하는 것).

3. 스토리 구조 (cofoundr 영화가 효과적이었던 이유)

1. 프레임 0에서 후크. 첫 번째 프레임은 썸네일입니다. 후크 라인은 이미 그 위에, 디스플레이 세리프로, 왼쪽 정렬되어 있으며, 한 단어는 강조색으로 표시됩니다. 큰 브랜드 모양이 그 옆에 위치합니다. 예시: "나는 코파운더를 찾을 수 없었다."와 파란색 원.
2. 하나의 작업 예제가 전체 매커니즘을 여행합니다. 실제 입력(사용자의 LinkedIn URL, 실제 쿼리)이 제품 카드에 입력되어 모든 단계를 거쳐 이동합니다. 후크의 모양은 카드 안으로 이어집니다 (아바타가 됨). 따라서 시청자는 스레드를 절대 놓치지 않습니다.
3. 상단의 단계 레일이 실제 단계 이름("enrich you, search 700M, score 30, write intros")을 표시하고, 그림이 해당 지점에 도달할 때 각 노드를 밝힙니다. 이것은 영화에 내장된 아키텍처 다이어그램입니다.
4. 각 단계는 고유한 그림 모양을 얻습니다: 입력된 필드, 700M에서 30으로 좁혀지는 점들의 필드, 점수별로 정렬되고 상위 10개가 강조색으로 유지되는 막대, 출력을 타이핑하는 결과 카드. 유사한 라인은 절대 동일한 그림을 얻지 않습니다.
5. 페이오프 = 로고가 의미를 갖는 순간. 두 모양(당신과 매치)이 함께 슬라이드되어 로고로 변하고, 워드마크가 흐릿하게 나타나며, 주요 숫자가 포함된 한 줄이 표시됩니다. 2초 이상 완전히 정지 상태를 유지합니다.

길이 15-17초. 사용자가 루프를 원하면 15초 미만.

4. 룩

기본적으로 다크 보이드가 아닌 제품 자체의 라이트 앱 셸을 사용합니다: #f0f2f8와 같은 배경, 흰색 카드 반경 28, 0 18px 40px rgba(15,23,42,.08) 그림자, 잉크 #0f172a, 뮤트 #64748b. 디스플레이: 브랜드의 세리프 ( assets/fonts/에 다운로드하고, 사용하는 모든 씬에서 @font-face로 선언). 본문: Inter 500/700. 최소 28 px 크기로 텍스트 읽기. 강조색은 프레임당 하나의 초점을 표시합니다.

금지: 다크 네이비 보이드, 글로우, 블룸, 네온, 파티클, 보라색/파란색 그라데이션, 유리 카드, 고정폭 대문자 레이블, 알약 칩, 모든 것이 중앙 정렬, 모든 요소가 페이드 업, 착지 후 떠다니는 제목, 구석에 고정된 로고, 한 줄에 세 개의 카드, KPI 그리드, 가짜 후보자의 실제 사람 얼굴 또는 이름.

5. 빌드

• <slug>-video/에서 npx hyperframes init <dir> 실행. 루트 index.html은 3개의 씬을 마운트합니다: hook, 매커니즘 씬 (UI가 작동하는 동안 하나의 연속적인 프레이밍), payoff.
• 모든 랜덤 시드(mulberry32). 생성된 점과 막대는 시간이 지정된 씬의 자식입니다.
• 모든 트윈에 fromTo 사용; 첫 번째 이후 동일한 대상의 반복된 fromTo에는 immediateRender: false 사용.
• 매커니즘 씬에 시간 이동 헬퍼 (const at = (t) => t + …)를 유지하여, 리타이밍이 스무 줄이 아닌 한 줄로 처리되도록 합니다.
• 변경될 수 있는 사본(URL, 헤드라인)은 컴포지션 변수에 넣습니다.

6. 랩 루프 (결과물이 포함된 후속 조치)

첫 번째 빌드를 절대 신뢰하지 마세요. 각 패스 후:

1. npx hyperframes check --json 실행; 모든 오류 수정. line_unread는 라인을 더 오래 유지(단어당 0.5초 + 0.3초)하거나 단어를 줄이는 것을 의미합니다; 절대 타입 크기를 줄이지 마세요.
2. npx hyperframes snapshot --at <모든 샷의 중간과 끝>을 실행하고 콘택트 시트를 읽으세요.
3. 각 문제를 참조가 출력하는 방식대로 번호가 매겨진 후속 조치로 작성하세요: "need 태그가 0.56초 동안 화면에 있고, 최소 1.27초가 필요합니다: 0.9초에 안착시키고 이후 모든 것을 1.6초에서 0.6초만큼 이동하세요." REVIEW.md에 기록하세요.
4. 렌더링 후, MP4 자체에서 심 프레임을 추출하여 (ffmpeg -vf "select='eq(n\,F1)+eq(n\,F2)',scale=360:-1,tile=Nx1") 확인하세요.

7. 음악

사용자가 제공한 트랙을 사용하세요 (assets/audio/에 복사). 트랙이 없으면 요청하거나, 프레임 번호에서 코드로 합성된 스코어를 제안하세요 (references/sound.md).

1. python3 scripts/find_drop.py <track>은 음량 맵과 가장 큰 드롭(정확한 발병 시간과 주변 비트 포함)을 출력합니다.
2. 영화의 히어로 순간(로고 모양이 닿는 순간, 결과가 도착하는 순간)을 선택하세요. 그것이 실제로 발생하는 프레임을 계산하세요 (back.out(1.4)의 경우 모양이 트윈의 약 23%에서 닿습니다).
3. data-media-start = 드롭 발병 시간 − 히어로 시간, 가장 가까운 비트로 스냅하여 영화가 비트에서 시작하도록 합니다. 사운드는 픽처 이후 0-1 프레임에 도착하며, 절대 그 전에 도착하지 않습니다.
4. <audio id="music" class="clip" data-start="0" data-duration="<영화길이>" data-media-start="…" data-volume="1" data-fade-in="0.05" data-fade-out="1.2">.
5. 렌더링 후 측정: npx hyperframes audio <mp4> --json은 히어로 프레임의 1프레임 이내에 발병(on onset)을 보여야 합니다; 음량 -16 ~ -14 LUFS, 실제 피크 ≤ -1 dBTP. 들은 것이 아니라 측정되었다고 말하세요.

8. 전달

• npx hyperframes render -f 60 -q delivery -o renders/<slug>.mp4 실행 후, ffprobe로 크기, fps 및 프레임 수 확인.
• MP4를 사용자에게 보내세요.
• REVIEW.md: 창의적 결정, 측정된 사항, 가장 약한 비트, 의도적으로 유지된 경고.
• 사용자의 목소리로 게시물 초안 작성 (기본값: 소문자, 후크 먼저, 짧은 라인, 매커니즘을 > 단계로, 코드의 실제 세부 사항 하나, 과장된 단어 없음). 절대 게시하지 마세요.