anime.js · Motion · Kokonut UI · Bklit UI · Manus. 움직임 · 컴포넌트 · 차트 · 에이전트를 어디서 가져오는지 한 장에 모았습니다. 그리고 내 프로젝트에서 무엇이 바로 되는지를 스킬이 직접 재서 알려 줍니다.
설치 0원 키 없음 라이브러리는 대신 안 깜 클로드 코드 구독 별도
터미널을 따로 열지 않아도 됩니다. 클로드 코드 안에서 둘 중 하나면 됩니다.
! 붙이기 — 제일 확실합니다
!npx --yes reborn-web5! 까지 함께 붙여넣으세요. 클로드를 거치지 않고 곧장 설치가 돕니다.--yes 도 빼지 마세요 — 이게 없으면 «받아도 되나요?» 하고 묻는 자리에서
아무 말 없이 멈춥니다.reborn-web5 설치해줘npx --yes reborn-web5cmd 라고 친 뒤 엔터.
맥 — command+스페이스 누르고 터미널 엔터.~/.claude/skills)에 깔립니다.
여기서는 ! 를 빼세요.먼저 컴퓨터에 Node.js 가 있어야 합니다. 없으면 위 명령이 아예 안 뜁니다 —
nodejs.org 에서 큰 초록 버튼을 누르고
계속 «다음»만 누르시면 됩니다(3분). 클로드 코드를 쓰고 계시면 이미 있습니다.
클로드가 “실행하지 않겠습니다”라고 하면 1번을 쓰세요.
이제 막 나온 설치기라 클로드가 낯선 것으로 보고 막는 것이고, 그 판단 자체는 옳습니다.
! 를 붙이면 클로드에게 부탁하지 않고 바로 돌아갑니다.
폰이나 브라우저의 클로드 화면에서는 안 됩니다 — 그 창은 인터넷 저쪽의 임시 서버라
깔아도 내 컴퓨터에 남지 않습니다. 내 컴퓨터의 클로드 코드나 터미널에서 해 주세요.
깔린 뒤에는 클로드 코드를 껐다 켜야 새 스킬이 잡힙니다.
깔고 나면 클로드 코드를 한 번 다시 켜야 새 스킬이 잡힙니다. 그다음 그냥 말하세요 — 이 프로젝트에 web5 다섯 곳 중 뭐가 바로 되는지 봐줘
움직임 엔진 — 스크롤 등장 · 순서대로(스태거) · 타임라인 · SVG 선 그리기. 틀을 안 가린다
animejs 4.5.0 · MIT · juliangarnier/anime 별 73,075 · 설치 npm i animejs(히어로에 그대로)
화면 전환·레이아웃·제스처 애니메이션 (옛 이름 Framer Motion). React · JavaScript · Vue
motion 13.4.2 · MIT · motiondivision/motion 별 33,709 · React/JavaScript/Vue(Vue 판 motion-v 2.4.4)
움직이는 배경·카드·버튼 컴포넌트를 내 코드로 복사해 넣는다(shadcn 레지스트리). React + Tailwind
MIT · kokonut-labs/kokonutui 별 2,117 · npm 패키지 아님(shadcn 레지스트리) · 공식 registry.json 의 컴포넌트 46개(+hook 4 · lib 1). 사이트는 「100+」라고 적는다
대시보드용 차트 컴포넌트(차트 데모 17종). shadcn/ui 위에 얹는다. React + Tailwind
MIT · bklit/bklit-ui 별 1,678 · shadcn 레지스트리 @bklit · 차트 데모 페이지 17종(sitemap 전수)
코드 라이브러리가 아니라 AI 에이전트 서비스 — 기획을 넘기면 웹앱·사이트를 지어 올린다. 유료(월 $20부터)
클로즈드 SaaS · 영구 무료 플랜 없음 · Standard $20 · $40 · $200 월 구독 · 가입 시 1회 체험
넷은 각 개발자의 MIT 오픈소스이고, Manus 는 유료 서비스입니다. 저희가 만든 것이 아니고 제휴도 없습니다.
[바로] anime.js
[바로] Motion
[준비] Kokonut UI
[준비] Bklit UI
[따로] Manus
[바로] anime.js
[바로] Motion
[바로] Kokonut UI
[바로] Bklit UI
[따로] Manus
[바로] anime.js
[바로] Motion
[준비] Kokonut UI
[준비] Bklit UI
[따로] Manus
[바로] anime.js
[바로] Motion
[안맞음] Kokonut UI
[안맞음] Bklit UI
[따로] Manus
Next + Tailwind + shadcn 프로젝트에서 깔기 전에 점검만 해 본 출력입니다.
$ npx --yes reborn-web5 --check (Next + Tailwind + shadcn 폴더)
package.json 있다 틀 next Tailwind 있다 shadcn 있다
[바로] anime.js — 움직임 엔진 — 스크롤 등장 · 순서대로(스태거) · 타임라인 · SVG 선 그리기. 틀을 안 가린다
· npm i animejs
[바로] Motion — 화면 전환·레이아웃·제스처 애니메이션 (옛 이름 Framer Motion). React · JavaScript · Vue
· npm i motion (React: import { motion } from "motion/react" · 쓰는 파일 맨 위에 "use client")
[바로] Kokonut UI — 움직이는 배경·카드·버튼 컴포넌트를 내 코드로 복사해 넣는다(shadcn 레지스트리). React + Tailwind
· npx shadcn@latest add @kokonutui/<컴포넌트이름> (kokonutui.com 에서 이름을 고른다)
[바로] Bklit UI — 대시보드용 차트 컴포넌트(차트 데모 17종). shadcn/ui 위에 얹는다. React + Tailwind
· npx shadcn@latest add @bklit/area-chart (차트 이름만 바꾼다: bar-chart · pie · radar …)
[따로] Manus — 코드 라이브러리가 아니라 AI 에이전트 서비스 — 기획을 넘기면 웹앱·사이트를 지어 올린다. 유료(월 $20부터)
· manus.im 에서 가입 — 영구 무료 플랜은 없고 가입 때 한 번 체험만 된다(2026-09-24 /pricing)
· 클로드 코드로 직접 지을 수 있는 일이면 굳이 안 써도 된다 — 위 넷으로 충분한지 먼저 본다판정이 맞는지 설치기 스스로 돌리는 시험입니다(네트워크를 쓰지 않습니다).
$ npx --yes reborn-web5 --self-test
자기시험 26건
전부 통과
(exit 0)섹션이 스크롤에 맞춰 차례로 떠오르게 anime.js 로 해줘 — 움직임 줄이기 켠 사람한테는 끄고
상품 카드 누르면 자리에서 커지며 상세로 넘어가게 Motion 으로 해줘
Kokonut UI 에서 배경 컴포넌트 하나 골라 첫 화면 뒤에 깔아줘
Bklit 막대 차트로 월별 매출 대시보드 만들어줘
이 프로젝트에 web5 다섯 곳 중 뭐가 바로 되는지 봐줘
지금 폴더의 웹 프로젝트(React/Next/Vue · Tailwind · shadcn)를 재서 anime.js · Motion · Kokonut UI · Bklit UI 중 무엇을 바로 쓸 수 있고 무엇은 한 단계 준비가 필요한지 가르고, 한국어 요청을 그 라이브러리 코드로 옮긴다. Manus 는 코드가 아니라 유료 서비스라고 먼저 말한다
~/.claude/skills/web5-ko/
한국어 안내 — 다섯 곳이 각각 무엇이고 언제 쓰나 · 무료인가 · 하지 않는 것
~/.claude/skills/web5-ko-guide/
지금 폴더에서 다섯 곳 판정만 봅니다. 아무것도 깔지 않습니다.
사이트 문구 100+ 는 공식 저장소 수(46)와 다르다 — 수를 말할 때는 46 과 출처를 같이
영구 무료가 아니다. 체험 1회 뒤 유료다
Manus 는 오픈소스가 아니다(넷만 MIT)
이 설치기는 라이브러리를 깔지 않는다. 명령을 보여 주고, 깔 때는 사용자에게 묻는다
스킬 하나가 일 하나를 들고 옵니다. 안 쓰는 걸 통째로 깔면 매번 짐이 되니, 골라 담는 쪽이 가볍습니다. 8,900원.
목록과 직접 까는 명령까지 그 페이지에 그대로 적어 두었습니다. 안 사셔도 됩니다.