uiNerd16/aicanvas

오픈 소스 애니메이션 React 및 Tailwind 컴포넌트, 디자인 시스템, 그리고 템플릿.

둘러보고, 복사하고, 출시하세요. 또는 AI 에디터가 대신 설치하도록 하세요.

애니메이션 React 컴포넌트, 토큰 기반 (token-driven) 디자인 시스템, 그리고 즉시 사용 가능한 템플릿이 포함된 성장 중인 컬렉션입니다. 모든 컴포넌트는 실제 소스 코드로 프로젝트에 제공되며, 많은 컴포넌트가 Claude Code, Lovable, V0를 위한 재현 프롬프트 (reproduction prompts)를 포함하고 있습니다. 오픈 코어 (Open core): 무료 라이브러리는 MIT 라이선스이며, 프리미엄 (Premium)은 독점 라이선스입니다.

단 한 번의 명령으로 프로젝트에 어떤 컴포넌트든 추가하세요:

npx shadcn@latest add @aicanvas/task-cards

새 프로젝트를 시작하시나요? 먼저 초기화한 다음 추가하세요:

npx shadcn@latest init # 새 프로젝트 전용
npx shadcn@latest add @aicanvas/task-cards

경로 (Path)	명령 또는 작업	용도
shadcn CLI	npx shadcn@latest add @aicanvas/<slug>	완성된 오픈 소스 코드를 저장소에 바로 넣기
AI Canvas MCP	npx -y @aicanvas/mcp	AI 에디터가 컴포넌트를 검색하고 대신 설치하도록 하기
AI와 함께 리믹스 (Remix with AI)	모든 컴포넌트 페이지에서 프롬프트 복사	Claude Code, Lovable 또는 V0에서 자신만의 방식으로 컴포넌트 재구축

전체 카탈로그를 둘러보고 aicanvas.me에서 원하는 컴포넌트에 대한 정확한 명령어를 복사하세요. pnpm dlx, yarn dlx, bunx 도 작동합니다.

오픈 코어, 무료로 시작하세요. 무료 라이브러리는 MIT 라이선스이므로 개인 및 상업적 프로젝트에서 사용할 수 있고, 자유롭게 수정할 수 있으며, 출처 표기 없이 출시할 수 있습니다. 프리미엄 컴포넌트, 디자인 시스템 및 템플릿은 독점 라이선스입니다. 전체 소스 제공, 종속성 없음. 모든 컴포넌트는 블랙박스 의존성 (black-box dependency)이 아니라 실제 React 및 TypeScript 코드로 코드베이스에 제공됩니다. 스타일을 재설정하거나, 확장하거나, 있는 그대로 출시하세요. 그것은 당신의 것입니다. AI 워크플로를 위해 구축되었습니다. shadcn CLI로 설치하거나, MCP를 연결하여 에이전트가 대신 설치하게 하거나, Claude Code, Lovable 또는 V0를 위한 재현 프롬프트를 전달하세요. 기본적으로 애니메이션 적용. Framer Motion 및 Tailwind CSS로 구축되어 Next.js App Router 또는 모든 현대적인 React 설정에서 바로 사용할 수 있습니다. 3D 요소는 Three.js를 사용합니다.

AI Canvas는 무료로 시작할 수 있습니다. 프리미엄(Premium)을 통해 디자인 시스템 (design systems), 템플릿 (templates), 그리고 비공개 소스 컴포넌트 (closed-source components)를 사용할 수 있습니다.

Spider Web: 커서에 반응하는 인터랙티브 실크 웹 (Interactive silk web) |
Cube Carousel: 드래그하여 회전하는 3D 사진 큐브 (Drag-to-spin 3D photo cube) |
Curious AI: 커서를 따라다니는 모핑 3D AI 오브 (Morphing 3D AI orb) |
Ripple Type: 토글 시 물결치는 SVG 텍스트 (SVG text that ripples on toggle) |
Product Card Deck: 드래그하여 넘길 수 있는 카드 덱 (Flick-through draggable card deck) |
Glass Music Player: 회전하는 바이닐이 포함된 글래스 미니 플레이어 (Glass mini player with spinning vinyl) |
Andromeda Button: SF 블루프린트 스타일 버튼, 5가지 변형 (Sci-fi blueprint button, five variants) |
Glass Dock: 커서 확대 기능이 있는 macOS 스타일 독 (macOS-style dock with cursor magnification) |

모든 컴포넌트는 aicanvas.me에서 찾아볼 수 있습니다.

AI Canvas를 사용자의 AI 에디터에 연결하여 에이전트가 직접 컴포넌트를 검색, 검사 및 설치하도록 하세요. 토큰 (tokens)을 절약하고, 처음부터 다시 시작하지 마세요.

claude mcp add aicanvas -- npx -y @aicanvas/mcp

또는 MCP 설정에 추가하세요:

{
"mcpServers": {
"aicanvas": {
...

Claude Code, Codex, Cursor 및 기타 MCP 호환 에디터에서 작동합니다. 서버는 읽기 전용 (read-only)이며 실행 시점에 라이브 레지스트리 (live registry)를 가져오므로, 새로운 컴포넌트가 출시된 직후 에이전트가 사용할 수 있습니다. 서버는 게시된 컴포넌트 소스 코드와 재현 프롬프트 (reproduction prompts)를 반환합니다.

독립형 컴포넌트를 넘어, AI Canvas는 토큰 기반 (token-driven)의 SF 및 블루프린트 디자인 시스템인 Andromeda를 제공하며, Mission Control, Service Order, Resource Planning, Signal Room과 같은 완성된 템플릿을 포함합니다. Andromeda 컴포넌트를 설치하면 해당 소스 코드와 함께 의존하는 공유 토큰 번들 (shared token bundle)이 함께 설치됩니다.

aicanvas.me/design-systems/andromeda 에서 확인하세요.

React 및 TypeScript, Tailwind CSS, 그리고 Framer Motion을 사용합니다. Next.js App Router를 위해 구축되었으며 모든 현대적인 React 설정에서 작동합니다. 3D 컴포넌트는 Three.js를 사용합니다.

AI Canvas는 활발하게 유지 관리되는 프로젝트입니다. 새로운 컴포넌트, 디자인 시스템, 템플릿이 정기적으로 출시됩니다. AI Canvas가 시간을 절약해 주었다면, 스타 (star)를 눌러 더 많은 빌더들이 이를 찾을 수 있도록 도와주세요.

AI Canvas는 MIT 라이선스 하에 오픈 소스 (open source)로 제공됩니다. 이슈 (Issues), 아이디어, 그리고 풀 리퀘스트 (pull requests)를 환영합니다. 컴포넌트를 제안하거나 버그를 보고하려면 이슈를 생성해 주세요.

이 무료 라이브러리는 MIT 라이선스를 따릅니다. 개인적 및 상업적 프로젝트에서 사용할 수 있으며, 자유롭게 수정할 수 있고, 출처 표기 없이 배포할 수 있습니다. 자세한 내용은 LICENSE를 참조하세요. 프리미엄 컴포넌트 (Premium components), 디자인 시스템 (design systems), 그리고 템플릿 (templates)은 AI Canvas Premium License에 따라 독점적 권한을 가집니다.