거대 커서 — 시선 운반자
의도적으로 크게 만든 macOS 스타일 포인터가 _눈에 띄는 주인공_처럼 프레임을 가로지릅니다: 화면 밖에서 들어와 시청자의 시선을 다음 관심 지점으로 안내하고, 클릭하여 다음 동작을 유발하며, 화면 밖으로 나갑니다. 여러 런치 필름에서 실제 검증된 기법입니다.
왜 필요한가. 큰 커서 움직임은 런치 비디오에서 가장 저렴하면서도 효과가 높은 모션 소스 중 하나입니다. 단일 요소, 변형(transform) 트윈만으로 (1) 정적이어서 죽은 것처럼 보일 장면에 시선을 유도하고, (2) 모프/전환에 인과 관계를 부여하며("클릭이 그렇게 만들었다"), (3) 새 장면이나 복잡한 애니메이션 시퀀스를 시작할 때 시청자를 정적인 상태에서 분할합니다. 크면 클수록 좋습니다 — 실제 크기의 커서는 비디오 스케일에서 사라져 보입니다.
크기 & 모양 (하우스 규칙)
- 전체 프레임 장면:
7cqw(1920 기준 약 134px). 인목업/소형 프레임 변형:4.6–5.5cqw. 절대 더 작게 하지 않음. - 모든 곳에서 하나의 SVG 화살표 지오메트리 사용. 입증된 두 가지 채우기 — 흰색 본체 + 검은색 외곽선, 또는 검은색 본체 (
#1c1c1c) + 흰색 외곽선 (1.4px). 장면 대비에 따라 선택하고, 필름 내내 일관성 유지. - 브랜드 테마 커서 (핵심 전술). macOS 화살표는 기본값일 뿐, 강제 사항이 아닙니다. 대상 브랜드에 인식 가능한 커서 아이덴티티가 있다면 — 협업 디자인 도구의 이름표가 있는 컬러 멀티플레이어 화살표(Figma 스타일), 크리에이티브 스위트의 정밀 십자선, 독특한 제품 포인터 — 그 커서를 대신 사용하십시오: 제품을 아는 사람에게 즉시 알아볼 수 있는 브랜드 언어가 됩니다. 동일한 법칙(과장된 크기, 물리적 진입/퇴장, 팁 정렬, 클릭 점화)이 그대로 적용되며, 이름표 변형은 하나의 단단한 유닛으로 이동합니다(태그가 화살표를 따라감). 브랜드 모티프가 진정으로 참조 가능한 경우에만 사용하십시오; 아무도 알아보지 못하는 커서는 이상한 화살표일 뿐입니다 — 기본 macOS로 돌아가십시오.
filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)),pointer-events: none,z-index는 모든 장면 콘텐츠 위,will-change: transform.
#root .cursor {
position: absolute;
left: 48%;
top: 115%; /* 화면 아래 오프스크린 — 기본 포즈 자체가 오프스크린 */
width: 7cqw;
height: 7cqw;
z-index: 20;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
pointer-events: none;
will-change: transform;
}
진입 법칙 — 물리적, 절대 드러나지 않음
커서는 항상 화면 밖에서 진입합니다(기본값: 아래쪽에서, top:115–120%) 감속하는 글라이드로 첫 번째 대상까지 이동합니다. 방 안으로 들어온 느낌이 들어야 합니다. 절대 불투명도 페이드인으로 정지 위치에 나타나지 마십시오, 마스크로 드러내지 마십시오 — 이는 글리치처럼 보입니다(실제로 반복적으로 관찰된 실패 모드).
- 기본 경로: y축을 따라 곧바로 대상까지 — 분할된 대각선 없음. 대각선은 스토리 자체일 때 괜찮습니다(축에서 벗어난 대상을 향해 진입), 하지만 어느 쪽이든 하나의 연속 벡터입니다.
duration: 0.4–0.92s,ease: power3.out, fromTo에immediateRender: false.
tl.fromTo(
cursor,
{ left: "48.6%", top: "115%" },
{ left: "48.6%", top: "55%", duration: 0.85, ease: "power3.out", immediateRender: false },
0.25,
);
팁 정렬 & 클릭 탭
핫스팟은 화살표 팁이지, 박스 중심이 아닙니다. 대상의 중심에 팁을 정렬하고, 모든 누르기 스케일링을 팁에 고정하십시오: transformOrigin: '21% 14%' (24단위 viewBox에서 하우스 화살표 경로 기준).
클릭 = 비대칭 압축/확장 (1:2 비율이 실제 탭처럼 읽힘):
tl.to(cursor, { scale: 0.84, duration: 0.1, ease: "power2.in", transformOrigin: "21% 14%" }, t);
tl.to(
cursor,
{ scale: 1, duration: 0.22, ease: "power2.out", transformOrigin: "21% 14%" },
t + 0.1,
);
대상의 반응은 별도의 병렬 트윈입니다 (버튼: scale: 0.94 + 누름 색상/그림자, 동일한 t에서 시작). 커서 전용 탭(예: 텍스트 입력에 포커스)은 대상 반응이 없습니다. 대상 측에서는 cursor-click-ripple / press-release-spring과 함께 사용하십시오.
클릭이 다음 동작을 점화합니다
모프, 타이핑 실행, 창 변형 또는 장면을 정의하는 애니메이션이 단순히 _시작_하지 않도록 하십시오. 커서를 트리거 위에 정지시키고 클릭이 그 동작을 유발하게 하십시오, 같은 프레임에서:
- 클릭 ▸ 메뉴/서브메뉴 계단식, 토글 플립
- 클릭 ▸ 입력 필드로 타이핑 시작
- 클릭 ▸ 컴포저 모프 다운 / 창 축소
- 클릭 ▸ 로고 점화 / 비행 시작
- 클릭 ▸ 재생 상태 플립 + 제품 목업에서 UI 생명 활성화
커서가 소유하지 않는 긴 비트(타이핑, 내레이션) 동안 커서는 옆으로 이동(0.5–0.9s, power2.out)합니다 — 절대 동작 위에 얼어붙어 있거나, 무의미하게 흔들리지 않습니다.
종료 법칙 & 장면 간 핸드오프
허용된 두 가지 종료 — 둘 다 물리적이며, 절대 제자리에서 불투명도 페이드 아웃하지 않음:
- 프레임 밖으로 나가기: 가장 가까운 가장자리로
power2.in가속 (left:'118%',left:'-12%', 또는top:'116%'), 0.5–0.7s. - 곡선 절단 핸드오프: 하드 컷 직전 약 0.3초 동안, 커서가 다음 장면의 첫 번째 클릭 지점을 향해 가속(
power2.in)하여 해당 경로의 약 1/3을 이동합니다; 다음 구성은gsap.set으로 커서를 핸드오프 포즈에 설정하고 일치하는 속도로power2.out을 계속합니다. 커서 자체가 이음새를 연결하는 운반 요소가 됩니다:
// 장면 A, 마지막 0.3초 — 여정 시작:
tl.to(cursor, { left: "40.7%", top: "63.7%", duration: 0.3, ease: "power2.in" }, CUT - 0.3);
// 장면 B, t=0 — 일치하는 속도로 완료:
gsap.set(cursorB, { left: "40.7%", top: "63.7%" });
tl.to(cursorB, { left: "22%", top: "45%", duration: 0.6, ease: "power2.out" }, 0);
체크리스트
- 전체 프레임에서 ≥ 7cqw (목업 내부에서는 4.6–5.5cqw) — 확실하지 않으면 더 크게
- 하나의 연속 벡터로 화면 밖에서 진입 (페이드/마스크 드러내기 없음)
- 팁이 대상 중심에 정렬; 누름은
transformOrigin: '21% 14%'에서 피벗 - 모든 클릭이 같은 프레임에서 어떤 동작을 유발
- 커서가 소유하지 않는 비트 동안 옆으로 이동; 무의미한 흔들림 없음
- 물리적으로 종료 (프레임 밖으로 나가거나 곡선 절단 핸드오프) — 제자리 페이드 없음