Jakubantalik/transitions.dev

외부 오픈소스 저장소를 소개하는 글입니다. HDATF 제품이 아닙니다.

무엇을 하나

transitions.dev는 웹 화면에 쓰는 CSS 전환 효과 모음과, 이를 프로젝트에 넣는 CLI, 코딩 에이전트용 skill, 화면 움직임을 검사하는 transitions-agent를 함께 담은 저장소입니다. 화면 전환과 애니메이션을 일관되게 맞추려는 프런트엔드 개발자와 Claude Code나 Cursor 같은 코딩 에이전트로 화면을 만드는 사람이 주요 대상입니다. 각 전환은 :root 사용자 정의 속성, t- 접두어 클래스, prefers-reduced-motion 대응을 갖춘 복사용 CSS 코드 조각으로 제공됩니다. transitions-dev CLI(MIT, Node 18 이상)는 계정 없이 무료 전환을 추가하고 목록을 보여 주며, Pro 전환은 기기 로그인 뒤 api.transitions.dev에서 내려받고 내려받을 때마다 이용 권한을 확인합니다. transitions-agent(MIT)는 11개 규칙으로 화면 코드를 로컬에서 검사해 0부터 100까지 모션 점수를 매기고, GitHub Action은 PR에 점수 댓글을 단 뒤 해당 PR 브랜치를 대상으로 수정 PR을 엽니다. fix 명령은 관련 파일을 호스팅 수정 서비스로 보내 Claude가 만든 수정안을 diff로 먼저 보여 주고, 사용자가 승인한 뒤에만 파일에 반영하며, 수정 범위는 CSS 전환과 애니메이션 보호 코드로 한정된다고 설명합니다. 무료 가입 단계는 검사와 Action을 무제한으로, 본인의 Claude Code나 Cursor로 하는 수정도 무제한으로, 호스팅 수정은 월 10회와 하루 2회까지 제공하고, Business 요금제는 월 59달러에 Pro 5석과 월 200회 수정을 포함합니다. 자체 Transitions.dev License는 개인과 상업 프로젝트에서 수정과 배포를 허용하고 경쟁 라이브러리로의 재배포를 금지하며, 회사에서 Pro 전환이나 유료 Agent 기능을 쓰려면 사람마다 Business 좌석이 필요합니다. CLI와 agent 도구 코드는 MIT이고, GitHub가 라이선스를 NOASSERTION으로 표시하는 것은 이 자체 라이선스 때문으로 보입니다. 전환 개수는 README 표 12개, README 본문 18개, 저장소 설명 43개 이상, agent 문서의 무료 32개와 Pro 11개로 서로 달라 실제 개수는 직접 세어 봐야 하며, 호스팅 수정은 코드를 외부 서비스로 보내므로 회사 코드에 쓰기 전에 보낼 파일 범위를 정해야 합니다.

라이선스

자체 라이선스 표준이 아닌 자체 라이선스입니다. 재사용 전에 라이선스 파일을 직접 읽어야 합니다.

같은 분야 저장소

• CopilotKit/OpenIntelligentUI
  OpenIntelligentUI는 질문에 대한 답을 글뿐 아니라 표와 조작 가능한 화면으로 보여주는 채팅 앱과 개발 기반입니다. 설명과 비교, 간단한 도구를 대화 안에서 제공하려는 개발자를 대상으로 합니다. 사용자 질문을 Python 에이전트가 처리하고 CopilotKit과 AG-UI를 통해 브라우저로 결과를 전달합니다. Jev가 표현 방식을 고르며 기본 표는 A2UI, 복잡한 시각화와 계산기는 샌드박스 안의 HTML, CSS, JavaScript로 구성합니다. 화면의 버튼과 입력값은 후속 질문으로 보낼 수 있지만 이전 결과를 다른 호출에서 직접 고치는 API는 없다고 설명합니다. 실행 환경은 Node.js 22 이상, pnpm 9 이상, Python 3.12 이상과 uv이며 답변용 OpenAI 키와 Jev용 키를 별도로 연결해야 합니다. 사용자 키는 브라우저 메모리에 머물지만 앱 서버를 거쳐 제공자에게 전달되므로 신뢰할 수 있는 배포에서만 사용해야 합니다. 확인한 query_data 소스는 샘플 CSV 전체를 반환하며 검색어 필터링이나 실시간 회사 데이터 조회를 하지 않습니다. 대화 체크포인트는 프로세스 메모리에 있어 재시작이나 여러 서버 운영 시 영속성이 보장되지 않습니다.
• storytold/vectorcraft
  VectorCraft는 경로, 글자, 레이어와 여러 작업 영역을 다루는 디자이너를 위한 Rust 벡터 일러스트 편집기입니다. JSON 기반 전용 문서, SVG와 PDF를 열며 PDF 호환 Illustrator 파일도 대상으로 하고 벡터나 일반 이미지로 내보냅니다. 도형 연산, 편집 가능한 외관 효과와 별도 렌더링 엔진을 두어 화면 자체와 문서 자료를 분리합니다. CLI와 에이전트 도구 연결 규약인 MCP는 화면 없는 실행 또는 데스크톱 연결 모드에서 그리기 명령, 문서 검사와 렌더링 미리보기를 제공합니다. 현재 Cargo 설정은 Rust 1.95를 명시하며 데스크톱 대상은 macOS, Windows, Linux, FreeBSD이고 브라우저 빌드는 WebAssembly를 사용합니다. 일본어 글꼴은 선택적인 공용 저장소에서 가져올 수 있고 데스크톱에서는 해당 자료가 없으면 설치된 시스템 글꼴을 사용합니다. README는 Illustrator와의 완전한 동등성을 약속하지 않고 고급 효과, 한중일 세로 조판, 세부 조작과 Windows 및 Linux 패키징의 부족을 밝힙니다. MCP 문서도 진행 알림, 실행 중 취소와 자료 변경 구독이 미구현이라고 명시하며 렌더링 속도 주장은 이번 조사에서 독립적으로 재현하지 않았습니다.
• kargulstudio/sales-crm
  README는 Next.js 16, React 19, Tailwind CSS 4 기반 시작 템플릿으로 설명합니다. AVIF 이미지 변환과 동영상 및 Rive 파일의 포스터 생성 스크립트를 포함합니다.
• lism-css/core
  웹 화면 배치를 빠르게 만드는 가벼운 CSS 설계 framework입니다. Every Layout의 배치 기본 요소와 비율 체계, Tailwind CSS의 한 속성 utility class 방식을 참고해 만들었습니다. 전체 CSS가 약 30킬로바이트이고, CDN이나 npm으로 빌드 단계와 설정 없이 쓰며, CSS layer로 규칙을 정리하고, props가 class와 사용자 속성으로 바뀌는 React와 Astro component를 함께 제공합니다.
• devdotfast/whiteboard
  사람과 코딩 에이전트가 함께 소프트웨어를 설계하는 데스크톱 캔버스입니다. 에이전트가 SDK로 작업 설명을 공유 공간에 그립니다.

Trendshift 순위 목록에 오른 저장소만 담았고, 목록은 후보를 찾는 데만 썼습니다. 순위 숫자는 옮기지 않았습니다. 설명과 라이선스, 별 수는 각 GitHub 저장소에서 확인했습니다. 해설은 우리의 판단입니다. 이 프로젝트들을 직접 시험한 것은 아니며, 상승 목록에 올랐다고 품질이 증명되지는 않습니다.