Motion

모션은 사용자 인터페이스의 표현력을 높이고 쉽게 사용할 수 있도록 도와줘요.

매크로 / 마이크로 모션

매크로 모션은 전체 레이아웃이나 페이지 전환처럼 큰 규모의 모션이에요. 페이지 전환, 모달 팝업, 슬라이드 메뉴 등이 있어요.

마이크로 모션은 작은 규모의 모션이에요. 버튼 클릭, 입력창 포커스, 스크롤 등이 있어요.

마이크로 모션은 0.2초 이하, 매크로 모션은 0.2초를 넘는 시간을 가져요. 사용자의 입력에 반응하는 마이크로 모션 중 누름에 대한 반응은 Feedback 에서 따로 정의해요.

토큰	용도
`easing`	버튼 클릭, 입력창 포커스 등 기능적인 마이크로 모션에 사용해요.
`enter`	다이얼로그, 시트 등이 나타나는 매크로 모션에 사용해요.
`exit`	다이얼로그, 시트 등이 사라지는 매크로 모션에 사용해요.
`enter-expressive`, `exit-expressive`	enter, exit 모션에서 특히 강조해야 하는 움직임에 사용해요.

곡선을 비교하고 재생 버튼으로 실제 움직임을 확인해 보세요. 시간을 바꾸면 같은 곡선이 다른 duration 에서 어떻게 느껴지는지 볼 수 있어요.

시간

진행률 표시처럼 일정한 속도가 필요한 움직임

버튼 클릭, 입력창 포커스 등 기능적인 마이크로 모션

다이얼로그, 시트 등이 나타나는 매크로 모션

다이얼로그, 시트 등이 사라지는 매크로 모션

특히 강조해야 하는 나타남

특히 강조해야 하는 사라짐

누름 축소 피드백

<div className="transition-opacity duration-(--rb-duration-d4) ease-enter data-[state=closed]:ease-exit" />

50ms

100ms

150ms

200ms

250ms

300ms

150ms$duration.d3

d1–d4(50–200ms)는 마이크로 모션에, d4–d6(200–300ms)는 매크로 모션에 사용해요.
color-transition 과 pressed-scale 은 같은 d3(150ms)를 참조해요. 눌림의 색 전환과 축소가 하나의 반응으로 느껴지도록 시간을 맞춘 거예요.
나타날 때보다 사라질 때를 조금 더 짧게 하면 인터페이스가 가볍게 느껴져요.

사용자가 OS에서 동작 줄이기(Reduce Motion) 를 켜면 움직임을 줄여야 해요.

// Tailwind motion-reduce 변형으로 축소 피드백을 꺼요
<button className="active:scale-[0.97] motion-reduce:active:scale-100" />

@media (prefers-reduced-motion: reduce) {
  .sheet { transition-property: opacity; }
}