모션

얼마나 오래, 어떤 곡선으로 움직이는지 정한다. 무엇이 움직이는지 정하면 시간이 따라온다.

시간

0.2초가 경계다. 버튼 눌림과 포커스, 회전 같은 마이크로 모션은 duration-4 이하를 쓴다. 팝업 개폐와 시트 슬라이드, 페이지 전환은 duration-4 를 넘는다.

색 · 테두리 · 배경 전환은 duration-3(150ms) 하나다. hover · error · disabled 로 바뀌는 순간 전부가 여기 해당하고, 눌림(duration-pressed)과 같은 시계다.

곡선

나타날 때와 사라질 때 다른 곡선을 쓴다. 나타날 때는 천천히 끝나 결과를 인지할 시간을 준다. 사라질 때는 빠르게 끝나 이미 끝난 일에 시간을 쓰지 않는다. 하나의 곡선으로 양방향을 처리하면 이 차이가 사라진다.

모션 줄이기

OS 에서 동작 줄이기를 켜면 prefers-reduced-motion: reduce 가 전달되고 duration 토큰이 전부 1ms 가 된다. 라이브러리 컴포넌트는 이 설정을 따른다.

커스텀 애니메이션에 시간을 하드코딩하면 이 장치를 우회한다. 0.2s 라고 직접 적는 대신 duration 토큰을 참조한다.

const shouldReduceMotion = useReducedMotion();

<motion.div
  initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: -8, scale: 0.98 }}
  transition={shouldReduceMotion ? { duration: 0 } : motionTransition.popover}
/>

눌림

눌림은 배율과 시간, 곡선 세 축을 함께 쓴다. 하나만 골라 쓰면 같은 눌림이 컴포넌트마다 다르게 느껴진다.

큰 요소일수록 덜 줄여야 같은 정도로 눌린 느낌이 난다. 전면 버튼을 0.94 로 줄이면 과하게 움츠러들고 작은 버튼을 0.98 로 줄이면 티가 안 난다.

전체 토큰