hughminhphan/motion-designer

모션 디자이너

에이전트가 만든 비디오에는 특정한 느낌이 있으며, 이는 기본값에서 비롯됩니다. 모든 요소가 power3.out으로 약 24px 위로 0.4~0.6초 동안 0.08초 간격으로 페이드 인 한 후, 더 이상 움직이지 않습니다. HyperFrames의 자체 애니메이션 가이드도 이를 기본값(gsap.defaults({ duration: 0.6, ease: "power3.out" }))으로 기록합니다. 이 스킬은 그 기본값을 재정의합니다. 다른 스킬의 모션 수치와 충돌할 경우 이 스킬이 우선합니다. 해당 스킬들로부터는 구조만 가져오고 커브나 타이밍은 절대 가져오지 마세요.

당신은 모션 디자이너입니다. 작품이 어떤 느낌이어야 할지 결정한 다음 선택하세요. 두 작품이 같은 방식으로 움직여서는 안 됩니다.

작업 루프

1. LIBRARY.md(이 파일과 같은 디렉토리)를 읽습니다: 레지스터, 커브, 스프링, 타이밍, 디바이스, 텍스트 처리.
2. 작품의 레지스터(technical, editorial, premium, expressive, playful, calm)를 선택합니다. 혼합해도 괜찮습니다. technical 작품에 한 가지 expressive 순간이 있는 것은 정상입니다.
3. 각 요소에 대해, 어떻게 이징할지보다 움직임이 무엇인지 먼저 결정합니다(LIBRARY 섹션 6): 이 라인은 컷온되는가, 타입온되는가, 트래킹을 고정하는가, 아니면 던져지는가? 대부분의 보조 텍스트는 컷온됩니다.
4. motion-kit.js를 컴포지션에 제공(assets/motion-kit.js, GSAP 이후 로드)하고 이를 사용하여 작업합니다.
5. 결과를 프레임별로 스크러빙하고 LIBRARY 섹션 8의 검사를 실행합니다.

규칙

• 기본값으로 명명된 프리셋 없음. power1부터 power4까지, CSS ease, 프레임워크 기본값도 안 됩니다. 모든 커브는 움직임을 위해 선택됩니다. MotionKit.curve('kit.land'), 시스템 커브(m3.emphasizedDecelerate, carbon.expressive.entrance), 또는 직접 만든 MotionKit.bez(x1, y1, x2, y2)를 사용하세요.
• 속성별로 하나의 커브. x와 y가 다를 수 있습니다(arc). 그래서 움직임이 던져진 물체처럼 휘어집니다.
• 거리와 무게에 따른 지속 시간. 0.3~0.6초 습관에서 벗어나세요: MotionKit.dur(px, weight).
• 종료는 진입보다 빠릅니다(약 0.65배) 가속하며 나갑니다(kit.leave, exitTo).
• 리드와 그에 따른 반응. 불균일한 오프셋(MotionKit.react(i): 0, 4, 9, 15, 22, 30 프레임)으로 절대 고른 스태거를 사용하지 않습니다.
• 정적인 상태가 목적이 아니라면, 홀드는 살아있게 유지(느린 카메라 드리프트, 래퍼의 wiggle, 살아있는 디테일).
• 텍스트: 작성된 텍스트(인용문, 프롬프트, 터미널 라인)는 문자 단위로 타입온(typeOn)됩니다. 다른 텍스트는 컷온(cut)되거나 트래킹을 고정(trackIn)합니다. 마스크된 아래에서 올라오기와 블러 인은 에이전트 비디오에서 가장 남용되는 움직임이므로 마지막 수단으로만 사용하세요.
• AI 느낌 없음: 모든 것을 페이드, 블러 인 타입, 떠다니는 글로우 오브, 샤이머 텍스트. 블러는 빠른 모션(렌더 타임 모션 블러)에 속하며, 나타나는 데 사용되지 않습니다.
• 절제. 디바이스(다이브, 플립, 팝, 스프링, 타입온)는 스토리를 전달함으로써 그 자리를 얻습니다. 작품당 대략 하나의 시그니처 전환. 모든 움직임을 높은 수준으로 제작하고, 디바이스는 아껴서 사용하세요.
• 오버슈트는 선택이지 장식이 아닙니다. 에디토리얼 및 제품 작품은 일반적으로 감속 커브와 댐핑 1의 스프링을 원합니다. 모든 것에 바운스가 적용되면 싸구려처럼 보입니다.

키트 (motion-kit.js)

시크-세이프: 모든 것은 일시 정지된 타임라인에서 fromTo로, 이전 프레임을 읽지 않으므로 재생하거나 스크러빙하든 모든 프레임이 동일하게 렌더링됩니다.

호출	기능
curve(name), bez(x1, y1, x2, y2)	LIBRARY의 모든 커브를 이름으로, 또는 직접 만든 베지어
dur(px, weight)	거리와 무게(0.7 가벼움, 1 보통, 1.35 무거움)로부터 지속 시간 계산
react(i)	i번째 추종자를 위한 불균일한 반응 오프셋
arc(tl, el, from, to, at)	휘어진 경로로 이동(x와 y가 다른 커브 사용)
anticipate(tl, el, prop, from, to, at)	작은 역방향 움직임 후 본 움직임
drag(tl, child, prop, lagPx, at, parentDur)	자식이 부모보다 늦게 움직이고 마지막에 정지
exitTo(tl, el, to, at)	더 빠르고 가속하는 종료
spring({ response, damping })	물리적 스프링; { ease, duration } 반환, 변환만 적용
cut, typeOn, trackIn, scramble, wipe, revealWords, revealLines, textRange	텍스트 처리
wiggle, withBounce, loop, ramp, controller + link	After Effects 도구: 시드 위글, 관성 바운스, 루프아웃, 시간 리맵, 널 + 픽-휩
grid(bpm)	비트 시간, 음악에 맞춰 시작하는 구문용

<script src="assets/gsap.min.js"></script>
<script src="assets/motion-kit.js"></script>
<script>
  const { C, F, curve, dur, react, arc, cut, trackIn } = MotionKit;
  const tl = gsap.timeline({ paused: true });
  cut(tl, '#sub', 0.6);                                   // 보조 텍스트 그냥 도착
  trackIn(tl, '#title', 0.2, { from: '0.3em' });          // 제목의 트래킹 고정
  ['#a', '#b', '#c'].forEach((el, i) =>                   // 리드와 반응, 아크로 던져짐
    arc(tl, el, { x: 900, y: 80 }, { x: 0, y: 0 }, 1.1 + react(i)));
  window.__timelines = window.__timelines || {};
  window.__timelines['root'] = tl;
</script>

커브는 일반적인 3차 베지어이므로, 동일한 숫자가 CSS cubic-bezier(), After Effects 속도 그래프 또는 Blender F-커브 핸들(LIBRARY 섹션 7)에서도 작동합니다.