theatlasteam/motion-design-skill

제품 모션 디자인

연속적인 스토리를 만드세요. 관련 없는 매력적인 카드의 슬라이드쇼가 아닙니다. 의도 → 행동 → 결과 → 제품 가치 → 브랜드로 이어지는 시청자의 관심 대상을 유지하세요.

시작점 선택

해당 예제의 README를 읽고, 그다음 소스를 읽으세요. 이 스킬을 기준으로 경로를 해석하세요. 이전 세션의 파일이 존재한다고 가정하지 마세요.

작업	여기서 시작
iOS 스타일 휠, 롤링 숫자, 세그먼트, 눈금자	examples/controls/README.md
키네틱 타입, 워프된 UI 진입, 커서 중심 쇼케이스	examples/relay/README.md
대형 컴포저, 타이핑과 연결된 카메라, 전송 → 생성된 결과	examples/composer/README.md
짧은 9:16 진정한 3D 디바이스 스핀	examples/device-studio/README.md
전체 22초 모바일 런칭	examples/milo-launch/README.md
MIDI 작곡, 샘플 악기, 믹싱	examples/midi-score/README.md

references/direction.md에서 스테이징 및 타이밍에 대해, references/deterministic-rendering.md에서 비디오 내보내기 전에, 그리고 references/asset-rights.md에서 자산 게시 또는 재배포 전에 읽으세요. 공식적인 타사 영감 링크는 references/gemini.md에 있습니다. 해당 비디오는 참조 자료일 뿐, 번들로 제공되는 오픈소스 자산이 아닙니다.

촬영 설정

1. 이미 제공된 제품, 대상, 화면 비율, 지속 시간, 톤을 재사용하세요. 작업을 변경하는 누락된 정보에 대해서만 물어보세요. 가상 제품의 경우 모든 세부 사항을 묻기보다는 일관된 개념을 선택하세요.
2. 제품 주장을 하기 전에 실제 제품/브랜드 자료를 검사하세요. 기능, 지표, 사용후기, 제작 스크린샷을 절대 만들어내지 마세요.
3. 새로운 시각적 방향의 경우, 전체 필름이 명시적으로 요청되지 않았다면 완성된 2~3초 HTML 샷 하나로 시작하세요. 확장할 때 승인된 안무를 유지하세요.
4. 기본적으로 프로토타입에는 자체 포함된 HTML/CSS/JavaScript를 사용하세요. HTML 요청은 값비싼 비디오 렌더링, 업로드, 클라우드 게시를 허가하지 않습니다. 필요하거나 요청된 경우에만 스택을 변경하세요.
5. 코딩하기 전에 액션의 순서와 카메라 핸드오프를 간략히 명시하세요. 각 샷의 초점 대상을 명확히 유지하세요.

모션 연출, 장식하지 마세요

• 실제 폰트가 로드된 후에 단어를 측정하세요. 새 단어가 도착하면 이전 단어를 재배치하고 구성의 중심을 유지하세요.
• 위치, 불투명도, 블러 커브를 분리하세요. 모션을 초기에 보이게 하고 최종 오버슈트 전에 블러를 명확히 하세요. 기본 페이드아웃 대신 의도적으로 종료를 애니메이션하세요.
• 짧고 읽기 쉬운 오버슈트와 안정을 사용하세요. 모든 물체가 흔들리게 하지 마세요. examples/relay/scripts/motion-core.mjs에는 테스트된 텍스트/카메라 스프링, 베지어 및 원통형 워프 함수가 포함되어 있습니다.
• 곡률이 중요할 때 여러 개의 수평 스트립으로 패널을 워프하세요. 단일 평면 회전은 구부러진 표면이 아닙니다. 하나의 진행 값에서 두 축의 대각선 움직임을 구동하세요.
• 읽을 수 없을 정도로 작은 대시보드를 보여주는 대신 실제 액션으로 확대하세요. 동일한 변환 좌표계에서 커서와 UI를 이동하고 핫스팟 보정을 포함하세요.
• 호버 → 누름 → 해제 → 실제 상태 변화를 보여주세요. 드래그는 픽업, 이동, 착지, 업데이트된 관련 상태가 필요합니다. 결과가 이를 발생시킨 액션을 따르게 하세요.
• 셰이더 시간을 장면 시계에 유지하세요. WebGL이 폴백될 때를 명시하세요. 정적 그래디언트를 실행 중인 셰이더라고 부르지 마세요.

인터랙티브 컨트롤 대 녹화된 모션

각 비디오에 대해 물리학을 재구축하는 대신 번들 컨트롤을 사용하세요.

• setValue(value)는 인터랙티브합니다: 현재 프레젠테이션 위치와 속도에서 스프링을 통합합니다. 입력이 이를 중단하도록 허용하세요.
• renderAt(value)는 결정론적입니다: 분수 구성 요소 값을 즉시 설정합니다. 비디오에서는 frame/fps에서 이 값을 도출하세요. 캡처 중에 라이브 스프링 또는 벽시계 루프를 실행하지 마세요.
• 휠의 경우, 목록 중간에 고정된 중앙 선택 창과 양쪽에 두 개의 곡선 옵션을 표시하세요. 중심까지의 분수 거리에서 위치, 기울기, 배율, 불투명도를 계산하세요.
• 포인터 캡처로 드래그를 1:1로 추적하세요. 해제 시 모멘텀을 투영하고, 유효한 항목에 스냅하며, 속도를 안정화로 전달하세요. 점진적 경계 저항을 적용하세요.
• 휠/트랙패드, 키보드, 포커스, 접근 가능한 이름/현재 값, 좁은 뷰포트, 축소 모션을 지원하세요. 의도적인 요구 사항 없이 소리나 햅틱을 재생하지 마세요.
• 직접 조작 시 외부 데모 타임라인을 중지하세요. 두 클록이 동일한 구성 요소를 위해 싸워서는 안 됩니다.

컴포저와 카메라

필드가 비어 있는 동안 양쪽 둥근 끝을 보여주세요. 타이핑 중에 유한한 필드를 확장하세요. 텍스트와 전송 위치를 측정하세요. 가속과 제동으로 시작 부분부터 성장하는 텍스트를 따라가고 전송에서 멈추세요. 별도의 텍스트 영역을 보호하여 문자가 버튼 아래로 절대 지나가지 않도록 하세요. 전송 후에는 독립적으로 스테이징된 결과와 그 안의 의미 있는 액션을 공개하세요. 입력을 출력으로 변형하지 마세요. 안무를 위해 일반 Canvas Lab 예제를 사용하되, 실제 모델의 동작이나 지연 시간에 대한 주장으로 사용하지 마세요.

진정한 3D 디바이스 샷

PNG 프레임이나 떠 있는 DOM 화면이 아닌 실제 GLB와 원래 디스플레이 메시를 사용하세요. 화면과 본체를 하나의 리그에 유지하세요. 스튜디오 소프트박스 반사, 분리된 금속/유리/광학 재질, 더 긴 렌즈 카메라, 이지드 회전, 읽기 쉬운 전면 유지를 사용하세요. 터치 표시기가 원근을 따르도록 화면 텍스처에서 앱 액션을 애니메이션하세요. 비디오를 위해 DOM 타이포그래피와 WebGL을 함께 캡처하세요.

참조 iPhone GLB는 포함되지 않았으며 MIT 라이선스가 아닙니다. 사용자의 별도 라이선스 사본이나 명시적으로 라이선스가 부여된 대안을 요구하세요. 다른 모델을 사용하기 전에 메시 이름, 디스플레이 법선, UV, 배율, 프레이밍을 확인하세요. 예제를 공식 Apple CAD, 공식 Apple 렌더, 또는 패스 트레이싱이라고 부르지 마세요.

사운드, 요청된 경우에만

references/music.md를 읽으세요. MIDI/악기가 요청된 경우 유료 신경망 API를 필수로 만들지 말고 원본 멀티트랙 MIDI → 별도로 획득한 라이선스 SoundFont → 렌더링된 스템 → 믹스를 선호하세요. 드문 사운드 악센트를 실제 화면 큐에 연결하세요. 음악, SFX, 음성을 독립적으로 편집 가능하게 유지하세요. 듣기/사용자 검토 없이 스코어가 좋거나 승인되었다고 주장하지 마세요. 측정값과 큐 시트는 완성된 청취 트랙이 아닙니다.

라이브 HTML의 경우, 제스처 게이트 오디오를 사용하고 시각적 클록을 오디오 resume() 프로미스나 중단된 오디오 클록과 독립적으로 유지하세요. 오디오 실패가 애니메이션을 멈추게 해서는 안 됩니다. 오프라인 비디오의 경우, 라이브 브라우저 오디오 스트림을 유일한 마스터로 녹음하는 대신 샘플을 타임라인에 정렬하세요.

검증 및 배송

1. 관련 수학/기능 테스트를 실행하세요. 직접, 역방향, 임의, 반복 탐색 확인; 커서 적중; 상태 인과성; 키보드/드래그 중단; 390px 레이아웃; JS 오류를 확인하세요.
2. 시각적 검토를 위해 사용자의 범위를 존중하세요. 렌더링 또는 메타데이터 검사가 시각적 검사라고 주장하지 마세요. 시각적 QA가 요청되면 실제로 대표적인 진입/중간/상호작용/종료 프레임을 검사하고 겹침, 잘림, 읽을 수 없는 사본, 잘못된 레이어를 수정하세요.
3. MP4의 경우, 실제로 렌더링하고 지속 시간, 치수, fps, 프레임 수, 디코드, 오디오 존재를 확인하세요. 지시사항만 전달하고 내보낸 비디오라고 부르지 마세요.
4. 요청된 HTML 또는 MP4와 재현 가능한 소스, 정확한 설정, 자산 권리 노트, 정직한 제한 사항을 함께 전달하세요. 조용히 음악을 추가하지 마세요.
5. 비공개 자격 증명, 세션 URL, OS 자산, 다운로드한 상용 모델, 제한된 자산이 포함된 생성된 번들을 공개 저장소에 보관하지 마세요. 루트 MIT는 원본 코드/문서를 다루며, 모든 종속성이나 외부 자산을 포함하지 않습니다.