Motion

Tiro의 모션 원칙 — restrained and purposeful.

Tiro의 모션은 다른 모든 것과 같은 원칙을 따릅니다: 절제되고 의도적인.

Allowed Patterns

• Position transitions — 패널 열기, Sheet 슬라이드
• Opacity fades — 요소 나타남/사라짐
• Subtle scale — 버튼 press 피드백 (0.98)

Prohibited Patterns

• Motion blur, glow, bloom
• Bouncing, elastic, spring 애니메이션
• 장식용 particle, confetti
• 다단계 로고 애니메이션
• Parallax 스크롤링
• 자동 재생 비디오 배경

Duration

최대 400ms — 로고 애니메이션만 최대 1.5s.

Easing

• ease-out — enter
• ease-in — exit
• ease-in-out — 상태 변화

Spring curves, bouncy cubic-bezier 금지.

Mobile Press Feedback

• opacity → 0.7
• Haptics.selection 호출

Reduced Motion

prefers-reduced-motion: reduce 시:

• Position/scale transition 비활성화
• Opacity transition만 유지
• Shimmer 애니메이션 (Skeleton, AIStreamingText) 정지

Logo Animation (필요 시)

• 펜이 먼저 나타나고, 점(머리/잉크 원)이 자연스럽게 materialize — 역순 금지
• 워드마크는 한 번에 (글자별 애니메이션 금지)
• Position과 opacity만 사용 — scale 변화, line effect, blur 금지
• 총 시간 ≤ 1.5초
• 프로덕션 전 sketch/text 스토리보드로 확인

Do / Don't

• Do: Position, opacity, subtle scale 기반 모션
• Do: ease-out/ease-in 기본, prefers-reduced-motion 존중
• Don't: Bounce, spring, elastic 곡선 사용 금지
• Don't: Parallax, particle, glow, motion blur 금지
• Don't: 400ms 초과 애니메이션 (로고 예외) 금지