모션·인터랙션

호환되는 벡터 점 사이를 보간해 두 아이콘 사이의 중간 형태를 확인한다.

실수하기 쉬운 작업을 일정 시간 눌러 실행한다. 취소 버튼과 키보드 입력도 지원한다.

카드를 방향으로 밀어 빠르게 승인·보류 판단하고 명시적 버튼으로 같은 결정을 수행한다.

항목 칩을 분류 영역으로 끌어 옮긴다. 각 항목의 이동 버튼으로도 같은 작업을 할 수 있다.

포인터 또는 키보드 포커스에 가까운 셀들이 거리 단계에 따라 함께 반응해 공간적 맥락을 드러낸다.

종이 모서리를 단계적으로 접는 효과로 숨겨진 메시지와 버튼을 보여준다. 별도 버튼으로 각 단계를 제어할 수 있다.

포인터 각도에 따라 무지갯빛 박막, 광택, 원근이 함께 움직이는 카드. 여러 겹의 그라디언트로 효과를 만든다.

원형 진행 링과 단일 재생 제어로 집중 세션을 표시하는 미니 타이머. 탭 한 번으로 정지·재개하고 초기화할 수 있다.

커서가 위에 있는 동안 중심 방향으로 끌려오는 CTA 래퍼. 떠나면 스프링백.

마우스 추적 3D 틸트 + 스크롤 패럴랙스 부유. 쇼케이스 목업 프레임용 래퍼.

요소가 화면에 들어오면 한 번 위로 떠오르며 나타난다. 여러 카드에는 순차 지연을 적용할 수 있다.

평소엔 평범하다가 주기적으로 짧게 RGB 채널이 어긋나며 지지직. attr(data-text) 의사요소 겹침만으로 순수 CSS, 서버 컴포넌트로도 동작.

문단이 뷰포트를 지나가는 동안 단어가 왼쪽부터 순서대로 흐림→진하게 채워지는 장문 스토리텔링 효과. 가장 가까운 스크롤 컨테이너를 자동 감지(없으면 페이지 스크롤).

커서를 따라다니는 라디얼 글로우가 카드 안을 비추고, 같은 지점의 테두리가 밝게 달아오른다. JS는 좌표 전달만, 그리기는 전부 CSS. 터치 기기는 정적 카드.

카드 테두리를 따라 빛줄기가 한 바퀴씩 도는 강조 효과. @property 각도 회전과 conic-gradient 마스크 링을 사용하는 CSS 패턴이다.

클릭한 지점에서 색종이가 팡 터져 중력을 받으며 팔랑팔랑 흩날린다(캔버스). 성공·축하 CTA용 마이크로 셀레브레이션. 입자 소멸 시 rAF 자동 정지.

마우스가 지나간 자리에 네온 빛 꼬리가 그려졌다 0.5초 만에 녹아 사라진다(캔버스). 글로우+코어 이중 패스. 꼬리 소멸 시 rAF 자동 정지, 데스크톱 전용.

중앙 요소 주위를 배지가 궤도를 그리며 도는 히어로 장식. 링과 배지를 반대 방향으로 회전시켜 배지 방향을 유지한다.

일정 거리 이상 내려가면 나타나는 우하단 버튼. rAF 스로틀 스크롤 리스너, 숨겨진 동안엔 탭 순서에서도 제외, reduced-motion이면 스무스 대신 즉시 이동.

두 레이어를 겹쳐 놓고 손잡이를 끌어 경계를 옮기는 비교 슬라이더. before/after가 ReactNode라 이미지든 컴포넌트든 비교 가능. 포인터 드래그 + 키보드(←/→·Home/End) 지원.

카드를 누르면 선택한 카드가 상세 화면으로 이어지는 전환 효과. View Transitions API를 지원하지 않는 브라우저에서는 전환 없이 화면이 바뀐다.

animation-timeline의 scroll()과 view()를 사용한 CSS 스크롤 애니메이션. 미지원 브라우저에서는 콘텐츠를 정적으로 표시한다.

position-try-fallbacks로 화면 경계에 맞춰 위치를 바꾸는 CSS 툴팁. 미지원 브라우저에서는 대상 위쪽에 표시한다.

선택 인디케이터가 액체처럼 늘어났다 다음 항목에서 다시 뭉친다. SVG 블러 + 알파 대비로 덩어리를 붙이는 고전 구이 트릭. 글자는 필터 밖이라 선명하다.

카드가 원통 둘레에 서고 링이 Y축으로 돌며 다음 카드를 정면으로 데려온다. 반지름을 r=(w/2)/tan(π/n)로 계산해 개수가 바뀌어도 이웃이 겹치거나 벌어지지 않는다.

포인터와 각 아이콘 중심 사이 거리를 재어 가까운 항목일수록 크게 표시하는 도구 모음. 주변 항목과 키보드 포커스에도 단계적으로 강조를 적용한다.

카드가 하나의 회전축을 중심으로 부채처럼 펼쳐지는 선택 UI. 선택한 카드는 위로 올라오며 좌우 방향키로도 이동할 수 있다.

포인터 각도를 단계 값에 스냅하는 회전형 선택기. 드래그와 방향키·Home·End를 함께 지원하며, 연속 range보다 상태의 성격이 뚜렷한 모드·감도 선택에 어울린다.

포인터로 코팅을 긁어 숨은 콘텐츠를 드러내는 캔버스 패턴. destination-out 합성으로 실제 지우개처럼 작동하고, 일정 면적을 지우면 자동 공개되며 키보드용 공개 버튼도 제공한다.

하나의 카드가 수집·검토·완료 위치를 이동할 때 지속 시간과 완화 곡선을 바꿔 본다. 위치, 크기, 상태색이 같은 전환 규칙으로 이어진다.