Transitions.dev

웹 애플리케이션 개발에 즉시 활용할 수 있는 UI 트랜지션 모음집 라이브러리입니다. 인터랙션 코드를 복사하거나 CLI와 에이전트 스킬로 프로젝트에 빠르게 적용할 수 있습니다.

다양한 UI 인터랙션 컴포넌트
- 기본 모션: 카드 리사이즈, 숫자 애니메이션, 메뉴 드롭다운, 모달 열기·닫기 등 자주 사용하는 UI 효과
- 고급 애니메이션: 물리 효과가 적용된 드래그 앤 드롭, 폭죽, 연기처럼 사라지는 삭제 효과, 3D 틸트 등 복잡한 연출
적용 및 제어 방식
- 웹사이트에서 CSS·React 코드를 복사하거나 npx transitions-pro add card-resize로 원하는 트랜지션을 프로젝트에 추가할 수 있습니다.
- npx skills add Jakubantalik/transitions.dev로 설치하면 Cursor, Claude Code, Codex 등의 에이전트가 트랜지션을 직접 적용할 수 있습니다.
- Refine tool을 이용해 실행 중인 화면에서 타이밍, 지연 시간, 이징과 모션 토큰을 정밀하게 조정할 수 있습니다.
무료 및 Pro 요금제
- 기본 UI 트랜지션과 복사 가능한 코드, 무료 스킬을 제공합니다.
- Pro에서는 전체 트랜지션 라이브러리, React·TypeScript 버전, Pro 스킬과 확장된 Refine 기능을 제공합니다.