Motion

컴포넌트는 색과 투명도만 느긋하게 바꾸고, 움직이는 것은 페이지가 바뀌는 순간뿐입니다.

전환 기본값

커스텀 유틸을 만들지 않고 Tailwind 토큰을 덮었습니다 — transition-colors 만 쓰면 이 시스템의 속도가 적용됩니다.

· --default-transition-duration 300ms · --default-transition-timing-function ease-out
· 그래서 컴포넌트는 transition-colors 한 줄만 씁니다. duration·easing 을 매번 붙이지 않습니다 (Tailwind 기본값은 150ms cubic-bezier 로, 이 시스템의 “느림”과 다릅니다)
· transition-all 은 쓰지 않습니다 — 의도하지 않은 속성까지 움직입니다
· 테마 전환만 예외적으로 500ms (눈부심 완화)

상호작용 상태

마우스를 올려보고, Tab 키로도 이동해 보세요 — 모든 인터랙티브 요소는 키보드 포커스 링을 가집니다.

hover — 도착점은 gray-9 하나로 통일

텍스트 링크 뒤로 나아가기

focus-visible — Tab 으로만 보이는 링 (outline gray-4)

마우스 클릭에는 뜨지 않고 키보드 탐색에만 뜹니다. outline 을 끄는 곳은 반드시 focus-ring 을 대신 달아야 합니다 — 현관 진입 버튼이 그렇게 링 없이 방치돼 있었습니다.

라우트 전환

이 시스템에서 위치가 움직이는 유일한 자리입니다 — 지금 이 페이지로 들어오실 때도 돌았습니다.

· 옛 본문이 12px 아래로 물러나며 사라지고(200ms), 그게 끝난 뒤 새 본문이 아래에서 올라옵니다(300ms). 합 500ms
· 겹치지 않습니다. 동시에 교차시키면 글자 위에 글자가 포개져 읽을 수 없는 잔상이 됩니다
· 나가는 쪽만 ease-in 입니다 — ease-out 은 초반에 급격히 투명해져 후반 내내 본문이 비어 보입니다
· 500ms 를 넘기지 않습니다. 전환이 도는 동안 화면은 스냅샷으로 대체되고 그 사이 클릭이 먹지 않습니다 — 전환 시간은 곧 입력이 죽는 시간입니다
· 브라우저 뒤로·앞으로 가기에는 걸리지 않습니다(링크 클릭에만)

reduced-motion

움직임을 줄여달라는 요청은 시스템 전체가 따릅니다.

prefers-reduced-motion: reduce 에서 모든 transition·animation 을 사실상 끕니다(0.01ms). 전역 media query 라 컴포넌트가 개별로 처리하지 않아도 됩니다. 라우트 전환은 별도 트리에 그려져 그 전역 규칙에 걸리지 않으므로, 같은 블록 안에서 ::view-transition-* 를 따로 잡습니다 — 지연까지 0 으로 눌러야 빈 화면이 남지 않습니다.