메인 콘텐츠로 건너뛰기

Motion

duration × easing 매트릭스를 트리거 기반으로 시연합니다. OS에서 reduced motion을 켜면 글로벌 CSS와 MotionPreview 모두 즉시 적용으로 분기합니다.

prefers-reduced-motionmacOS 시스템 환경설정 → 손쉬운 사용 → 디스플레이 → 동작 줄이기. 이 옵션을 켜면 본 페이지의 모든 transition이 0ms로 적용되며, 글로벌 @media (prefers-reduced-motion)CSS가 워크벤치 전역에 동일 규칙을 적용합니다.

Duration × Easing

motion-duration-fast150msmotion-easing-standardcubic-bezier(0.4, 0, 0.2, 1)
motion-duration-fast150msmotion-easing-emphasizedcubic-bezier(0.2, 0, 0, 1)
motion-duration-normal200msmotion-easing-standardcubic-bezier(0.4, 0, 0.2, 1)
motion-duration-normal200msmotion-easing-emphasizedcubic-bezier(0.2, 0, 0, 1)
motion-duration-slow300msmotion-easing-standardcubic-bezier(0.4, 0, 0.2, 1)
motion-duration-slow300msmotion-easing-emphasizedcubic-bezier(0.2, 0, 0, 1)

Console Feedback Motion

상태 인지용

운영 콘솔은 장식 모션을 추가하지 않고, hover/focus, layer 진입, loading 상태를 기존 duration/easing 조합으로만 표현합니다. reduced motion에서는 전역 정책에 따라 즉시 적용 또는 정지로 전환됩니다.

  • hover / focus

    fast + standard

    행과 버튼은 색/표면 전환만 빠르게 적용하고 위치 이동은 최소화합니다.

  • drawer / modal

    normal~slow + emphasized

    진입은 surface 위치와 opacity 변화로 현재 layer를 인지시키며 focus 이동과 함께 동작합니다.

  • skeleton

    slow

    실제 row 높이와 avatar 크기를 유지해 loading 중 layout shift를 만들지 않습니다.

Motion Samples

prototype의 hover · toast · modal · drawer · loading 모션 샘플을 워크벤치에서 직접 트리거할 수 있습니다. hover는 위치 이동 없이 색상만 전환하고, toast는 현재 re-verse 앱의 ToastPreview 구현을 그대로 사용합니다.

hover / toast
토스트 도착현재 앱 toast는 soft surface와 상태별 aria-live를 사용합니다. · 1
현재 앱 toast component · 별도 hover/lift motion 없음
modal / drawer
drawertransform 300ms
modalopacity + translateY 200ms
loading
linear infinite 0.8s
toast tone matrix
토스트 도착현재 앱 toast는 soft surface와 상태별 aria-live를 사용합니다.
성공설정 저장, 계좌 변경 완료처럼 성공 feedback에 사용합니다.
RE:Verse 앱 보기