Kidow

무엇을 제공하나

Eduard Bodak이 만든 작은 버튼 모션 라이브러리·실험 갤러리. 공개 페이지의 데모 링크를 세면 43종이다. Webflow 복제 CTA와 맨 위로 이동 버튼은 제외했다. GSAP 표시 3종(GSAP-Teleport, GSAP Color, GSAP-FUN), 나머지 40종은 CSS 중심의 버튼 연출이다. 31종은 개별 button-* 클래스, 12종은 .button-default에 is-* 변형 클래스를 붙인 구조다. 별도 입력·체크박스·라디오 컴포넌트는 FAQ의 향후 계획으로만 안내한다.

어떤 모션을 참고할 수 있나

• 마스크·형태: Arrow-Blob, Dot-Morph, Clip-Polygon, Clip-Corners, Clip-Triangle, Blob-Parade.
• 픽셀·게임: Item-Box, Pixel-Bolt, Pixel-Tetris, Pixel-Broke, Is-Pixel-Bonanza, Is-Wonder-Warp.
• 색·글자·블러: Color-Reveal, Color-Tennis, Color-Tunes, Color-Flip, Swooosh, Blur-Lift, Vortex-Blur, Portal-Pop, Flipflop.
• 각각 Jitter, Next.js Conf, Zentry, Mario, Zenless Zone Zero 등 영감 출처를 표시한다. 영감 출처와 코드 제공자의 라이선스를 같은 것으로 보지 않는다.

코드 가져오는 방식

공식 Webflow Cloneable: https://webflow.com/made-in-webflow/website/tiny-mighty-buttons FAQ는 Webflow에서 사이트를 복제하고 구조·스타일을 살펴보라고 안내한다. 공통 스타일은 상단 global-button-css, 개별 버튼의 CSS는 해당 버튼 앞의 이름 붙은 embed에 있으며 나머지 기본 스타일은 Webflow에 설정돼 있다. 필요한 스타일을 함께 확인해 자신의 클래스·마크업으로 재구현한다. 개발자 도구로 검사하는 경로도 안내한다. 간편 복사 버튼은 학습·재구현을 유도하려고 제공하지 않는다고 설명한다. npm 설치, React 컴포넌트, shadcn 레지스트리, GitHub 저장소 경로는 확인되지 않았다. GSAP 3종은 SplitText·CustomEase를 사용한다. 실제 데모 페이지에는 Webflow 런타임·jQuery·Locomotive Scroll·SplitType도 로드된다. 사이트 전체의 의존성과 특정 CSS 버튼에 필요한 의존성은 구분한다.

입력 방식·접근성과 이식 시 확인할 점

CSS에서 hover: hover / pointer: fine 조건, focus-visible 스타일, prefers-reduced-motion 대응을 확인했다. 공통 모션 감소 규칙은 CSS 애니메이션·전환 시간을 줄인다. GSAP 버튼은 pointerenter와 focus 이벤트로 실행한다. 이를 전체 버튼의 모든 브라우저 접근성 검증으로 해석하지 않는다. 데모 43종은 a 링크로 렌더링된다. 실제 액션 버튼으로 쓸 때는 FAQ가 안내하는 button 요소와 type="button"으로 바꾸고 마크업을 점검한다. 페이지는 button 안에 div를 넣지 말라는 주의도 표시한다. CSS vendor prefix는 작성자가 생략했다고 설명하므로 적용 환경에 맞춰 보완한다. 문서·공개 소스를 확인했으며 실제 브라우저별 실행 시험은 하지 않았다.

기존 북마크와 비교

• Appllama Loader Buttons: WebGL·SVG·Canvas·CSS 로딩 상태 연출 25종, 디자인 참고 중심. Tiny Mighty는 호버·포커스 모션 43종이고 Webflow 복제로 스타일·구조를 볼 수 있다.
• HoverUI: React·shadcn으로 설치하는 호버 효과 12종, MIT·단일 파일 중심. Tiny Mighty는 Webflow 구조를 참고해 이식하는 방식이며 표준 패키지나 MIT 선언은 확인되지 않았다.
• Toggle Supply: HTML·CSS·JS 인터랙션 16종과 레퍼런스 57개, GitHub·MIT 제공. Tiny Mighty는 버튼 분야에 집중하며 Webflow Cloneable이 소스 접근 경로다.

확인 근거

확인일: 2026-10-04. 공식 페이지의 최신 기재 변경 기록: v0.39 / 2025-05-07, GSAP 버튼 3종 추가. 이는 패키지 배포 버전이 아닌 사이트 변경 기록이다. Webflow 페이지의 Clone in Webflow 링크 확인. 제작자 사이트·프로젝트 페이지에서 별도 MIT 등 코드 라이선스 선언은 확인되지 않았다. 공식 데모·FAQ·Changelog: https://tiny-mighty-buttons.webflow.io/ 공식 복제 페이지: https://webflow.com/made-in-webflow/website/tiny-mighty-buttons 제작자: https://webflow.com/@eduardbodak

무엇을 제공하나

Artur Bień의 작은 JavaScript 풍선 효과 라이브러리. 성공·완료·생일·출시 같은 이벤트에서 화면 전체에 잠깐 축하 연출을 얹는 용도로 적합하다. 일반 SVG 풍선과 풍선처럼 부풀린 텍스트·이모지 두 모드이며, UI 컴포넌트 갤러리나 상시 배경 파티클 엔진은 아니다.

설치와 API

npm install balloons-js import { balloons, textBalloons } from "balloons-js";

balloons(); textBalloons([{ text: "🎉축하해요", fontSize: 120, color: "#ff4081" }]);

• balloons(): 인자 없는 함수. Promise<void>를 반환하며 모든 애니메이션이 끝나면 풍선과 컨테이너를 제거하고 resolve한다.
• textBalloons(): { text, color, fontSize } 배열을 받으며 반환값은 void. 각 배열 항목은 한 줄, 문자열은 Intl.Segmenter로 이모지를 포함한 글자 단위로 나눈다.
• npm 최신 0.0.3(2025-04-01 발행). ESM·CommonJS와 dist/index.d.ts 제공. 런타임 dependencies 없음, peerDependencies도 없음. 특정 프레임워크나 GSAP 없이 동작한다.
• 브라우저 DOM을 직접 다루므로 SSR 환경에서는 클라이언트 이벤트·라이프사이클에서 실행한다.

소스로 확인한 동작

일반 풍선은 뷰포트 크기로 크기·개수를 계산하고 최소 7개를 띄운다. 노랑·빨강·파랑·초록·보라의 5가지 색 조합, 3D transform과 원근, 기울기·블러로 거리감을 만든다. 각 풍선 애니메이션은 약 25~30초이며 순서에 따른 지연이 있다. 텍스트 풍선은 SVG morphology·blur·specular lighting으로 볼륨·광택을 만든다. 줄 사이 지연은 1초, 글자 사이는 0.1초로 소스에 지정돼 있다. 두 모드 모두 fixed 레이어와 pointer-events: none을 사용한다. 공개 API에 개수·속도·색 팔레트·취소 핸들 설정은 없다(일반 풍선 기준). 텍스트 모드는 개별 풍선은 제거하지만 컨테이너 제거 코드는 확인되지 않았다. 반복 호출을 제품에 넣을 때 정리가 필요하다. 두 구현에 prefers-reduced-motion 분기는 없어 모션 감소 처리는 호출부에서 추가해야 한다. 텍스트 모드의 Intl.Segmenter와 Web Animations API 지원도 대상 브라우저에서 확인한다. 문서·소스 확인이며 실제 브라우저 실행 시험은 하지 않았다.

기존 북마크와 비교

• React Weather Effects: 비·눈·안개·폭풍처럼 분위기를 만드는 React 화면 효과. Balloons.js는 프레임워크 독립적인 이벤트성 축하 연출이며 npm·MIT·설치 경로가 명확하다.
• HoverUI: 버튼·카드·링크에 붙이는 React 호버 효과 12종. Balloons.js는 상호작용 요소 대신 화면 전체에 실행하는 풍선 효과이며, HoverUI에 있는 모션 감소 감지가 이 구현에는 없다.
• UICapsule: 실제 앱 인터랙션을 구현한 React·Tailwind 컴포넌트 52종. Balloons.js는 풍선 효과에 집중한 npm 단품으로 설치·실행 범위가 작다.

확인 근거

확인일: 2026-10-04. 공식 LICENSE: MIT, Copyright 2024 Artur Bień. npm 메타데이터도 MIT. 공식 데모: https://arturbien.github.io/balloons-js/ 저장소: https://github.com/arturbien/balloons-js npm: https://www.npmjs.com/package/balloons-js 일반 풍선 소스: https://github.com/arturbien/balloons-js/blob/main/src/balloons.ts 텍스트 풍선 소스: https://github.com/arturbien/balloons-js/blob/main/src/textBalloons.ts 라이선스: https://github.com/arturbien/balloons-js/blob/main/LICENSE

무엇을 제공하나

Vaso는 유리 표면을 만드는 React 래퍼 한 종류다. 사이트의 테마 스위치, 크기 변경 패널, 드래그 렌즈, 프로스트 토글, 세그먼트 컨트롤, 컬러 피커 렌즈, outset, 알림은 같은 컴포넌트의 응용 예시다. 별도 UI 컴포넌트 세트로 세지 않는다. 자식 콘텐츠는 유리 레이어 위에 놓이고, 굴절 대상은 뒤쪽 배경이다.

설치와 조절

npm install vaso import { Vaso } from 'vaso'

React 18·19를 peer dependency로 사용하며 추가 런타임 의존성은 없다. Tailwind 없이도 사용할 수 있다.

• depth: 기본 0, 범위 -5~5. 양수는 가장자리 굴절, 음수는 오목한 유리처럼 압축하는 효과. 기본값이 0이므로 굴절을 원하면 값을 지정한다.
• blur: 기본 0.1px, 범위 0~10.
• dispersion: 기본 0.5, 범위 0~3 또는 false. 가장자리 색 분산을 조절한다.
• specular: 기본 0.5, 범위 0~1 또는 false. 가장자리 광택을 조절한다.
• radius: 생략하면 계산된 border-radius를 따른다.
• outset: 숫자 또는 x/y/top/right/bottom/left 설정. 레이아웃 크기를 바꾸지 않고 유리 표면만 바깥으로 확장한다. 개별 방향이 축 설정보다 우선한다.
• component: 기본 div, 원하는 루트 요소로 변경 가능. 빈 렌즈는 width·height를 지정한다.

브라우저 처리와 제한

공식 README와 소스 기준, Chromium 계열은 SVG feDisplacementMap을 backdrop-filter에 적용한다. Safari·Firefox는 뒤쪽의 가까운 조상을 복제해 굴절시키는 폴백을 자동으로 사용한다. 스크롤·드래그에 맞춰 위치를 갱신하고 video·canvas도 미러링한다. DOM 변경 시 복제본을 갱신하며 멀리 화면 밖에 있는 유리 레이어는 복제를 일시 중지한다. 복제 대상 요소가 400개를 초과하면 복제를 생략하고 blur와 rim을 유지한다. 복제 영역 밖의 조상에 의존하는 CSS는 복제본에서 다르게 보일 수 있다. 복잡한 페이지에서는 실제 화면·성능을 확인해야 한다. 여기서는 문서와 소스를 확인했으며 브라우저별 실행 시험은 하지 않았다.

기존 북마크와 비교

• Pane: 공유 유리 재질 위에 버튼·카드 등 10종을 제공하고 지원 감지·포인터 훅을 포함하는 React 19·Tailwind 4 세트. Vaso는 React 18·19에서 기존 콘텐츠를 감싸는 효과 래퍼다.
• Glass UI: shadcn 컴포넌트 49종을 Glass/Frosted/Fluted/Crystal 변형으로 대체하는 세트. Vaso는 하나의 표면에서 굴절·분산·림광·오목 효과를 조절한다.
• washiveil: 화지 질감·색 테마·중일 타이포를 포함한 58종 디자인 세트. Vaso는 이러한 디자인 테마보다 배경의 광학 효과에 집중한다.

확인 근거

확인일: 2026-10-04. npm 최신 1.0.0. npm 메타데이터와 공식 README에 MIT 명시. 제작자 huozhi. 공식 사이트: https://vasooo.vercel.app/ npm: https://www.npmjs.com/package/vaso 저장소·README: https://github.com/huozhi/vaso 굴절 래퍼 소스: https://github.com/huozhi/vaso/blob/main/src/index.tsx 배경 복제 폴백 소스: https://github.com/huozhi/vaso/blob/main/src/backdrop-copy.ts

무엇을 제공하나

• Michael Andreuzza가 만든 Tailwind CSS·Alpine JS 블록 라이브러리. 마케팅 랜딩 페이지와 앱 화면·eCommerce 화면을 함께 다룬다.
• HTML 마크업을 직접 복사하거나 다운로드할 수 있고, Astro 프로젝트에는 CLI로 소스를 가져올 수 있다.
• 사이트는 light/dark 스타일을 제공한다. 테마별 미리보기·변형을 별도 설치 블록으로 중복 합산하지 않았다.
• 홈페이지의 Astro Templates 링크는 외부 Lexington Themes로 연결된다. Oxbow의 공개 MIT 블록과 외부 템플릿 상품을 구분한다.

현재 실측 규모

• 2026-10-04 packages/cli/registry/index.json: 고유 블록 425개.
• Application 253, Marketing 150, eCommerce 22. category + section 조합은 51개.
• 홈페이지의 범주 카드 합계도 425개로 동일했다.
• 홈페이지 소개 문구는 427개를 표시한다. 제목은 실제 CLI 포함 레지스트리 기준 425개이며, 소개 문구와 현재 목록의 2개 차이를 기록한다.
• 범주별 변형 하나가 설치 가능한 블록 하나다. Hero·Pricing·Button 같은 범주 이름의 수와 블록 수를 구분한다.

주요 범위

• Marketing: Bento Grid·Hero·Pricing·Features·FAQ·CTA·Newsletter·Logo Cloud·Stats·Testimonials·Gallery·Footer·Landing/Pricing Page 등.
• Application: 폼 입력·Checkbox·Radio·Select·Textarea·Toggle, 버튼·메뉴·알림·모달·탭·내비게이션 등.
• eCommerce: 상품과 쇼핑 화면에 필요한 블록.
• 홈페이지 카드 예시로 Gallery 20, Features 18, Pricing 11, Inputs 22, Checkboxes 16, Textareas 17개 변형을 확인했다.

실제 코드·미리보기 확인

• Pricing 01은 두 요금제와 월간/연간 전환을 보여 준다. 블록당 Preview / Code, 모바일·태블릿·데스크톱 보기, Copy code, Download code, 새 창 열기 버튼을 제공한다.
• Code 화면에서 약 1.4만 자 HTML을 확인했다. Tailwind 유틸과 bg-background·text-foreground·border-border 같은 테마 토큰, Alpine의 :class·@click·:aria-pressed로 duration 상태를 참조한다.
• 따라서 Tailwind와 Alpine의 실행 환경·공통 테마 토큰을 갖춘 프로젝트에서 사용하는 코드다. 표시된 조각만으로 모든 스타일·상태 초기화가 독립적으로 갖춰졌다고 가정하지 않는다.
• 사이트 패키지는 Tailwind CSS v4·Alpine JS v3와 focus/intersect/UI 플러그인, Tailwind forms/typography 플러그인을 사용한다. 모든 블록이 모든 플러그인을 필요로 한다는 의미는 아니며 선택한 블록의 동작에 맞춰 설정한다.
• 공개 registry/pricing-01.json은 oxbow/marketing/pricing/01.astro 파일을 배포한다. 해당 항목의 dependencies·devDependencies·registryDependencies 배열은 비어 있다.

CLI·MCP

• CLI: npx oxbowui list
• 확인한 가격 블록 설치 명령: npx oxbowui add pricing 1
• CLI README는 Astro 프로젝트에 블록을 설치하는 용도라고 명시한다. --cwd로 대상 경로, --yes로 기존 파일 덮어쓰기, --all로 전체 설치를 선택할 수 있다.
• CLI는 패키지에 포함된 registry/index.json과 개별 블록 JSON을 읽는다. 현재 저장소의 CLI/MCP 패키지 버전은 각각 0.0.1, Node 요구는 20 이상이다.
• MCP: npx oxbowui-mcp
• MCP 도구: list_components, search_components, get_component, add_component.
• 이번 작업에서는 소스와 안내를 확인했으며 CLI/MCP 설치나 사용자 프로젝트·전역 설정 변경은 하지 않았다.

기존 북마크와 비교

• HyperUI는 순수 Tailwind HTML을 복사하는 자료다. Oxbow는 마케팅·앱·커머스 블록에 Alpine 상태·상호작용을 함께 제공하고 Astro CLI·MCP 경로도 둔다.
• VibePrompts는 섹션별 생성 프롬프트와 HTML 중심이다. Oxbow는 완성 블록을 반응형 화면에서 직접 보고 소스를 복사·설치하는 데 적합하다.
• daisyUI는 btn·card 같은 의미 CSS 클래스를 Tailwind 플러그인으로 제공한다. Oxbow는 구체적인 화면·섹션 마크업을 프로젝트로 가져오는 방식이다.
• Toggle Supply는 vanilla CSS/JS의 개별 스크롤·호버·갤러리 인터랙션 중심이다. Oxbow는 Tailwind/Alpine 기반의 레이아웃·폼·상업 페이지 블록 범위가 넓다.
• Reacticx는 React Native의 Reanimated/Skia이고 Motion Core는 Svelte의 GSAP/OGL이다. Oxbow는 웹 Tailwind/Alpine 블록으로 런타임과 목적이 다르다.
• Kidow / Frontend / UI Components에 분류한다.

출처·라이선스

• 공식 저장소 LICENSE.md에서 MIT를 확인했다.
• 홈페이지: https://oxbowui.com/
• 확인한 블록: https://oxbowui.com/playground/marketing/pricing/01/
• 공개 블록 JSON: https://oxbowui.com/registry/pricing-01.json
• 공식 GitHub 링크 UnwrappedDesign/oxbow는 현재 michael-andreuzza/oxbow로 연결된다.
• 저장소: https://github.com/michael-andreuzza/oxbow
• 실측 목록: https://github.com/michael-andreuzza/oxbow/blob/main/packages/cli/registry/index.json
• CLI·MCP: https://github.com/michael-andreuzza/oxbow/tree/main/packages/cli / https://github.com/michael-andreuzza/oxbow/tree/main/packages/mcp
• 라이선스: https://github.com/michael-andreuzza/oxbow/blob/main/LICENSE.md
• 확인일: 2026-10-04.

무엇을 제공하나

• Ritesh(@rit3zh)의 React Native·Expo UI 라이브러리. Reanimated의 UI 스레드 모션, Skia 셰이더·캔버스, Gesture Handler의 드래그·스와이프·누르기 상호작용을 중심으로 한다.
• 웹사이트의 미리보기는 기기에서 녹화한 영상이라고 안내한다. 결과를 웹에서 재구현한 React DOM 컴포넌트로 취급하지 않는다.
• npm의 reacticx는 소스를 가져오는 CLI다. 컴포넌트는 프로젝트 안으로 복사되어 이후 직접 편집하는 방식이며 앱 전체를 라이브러리 래퍼로 감쌀 필요가 없다고 설명한다.

수량을 구분해서 보기

• 2026-10-04 /components-preview의 실제 고유 컴포넌트 링크 132개와 표시 수가 일치했다.
• 카탈로그 분류: Shaders 15, Texts 13, Micro Interactions 16, Components 88.
• 홈페이지는 156 React Native components를 안내한다.
• 저장소 루트 registry.json의 components 엔트리는 164개. organisms 40, molecules 45, blocks 19, primitives 9, base 15, micro-interactions 11, charts 5, pieces 10, templates 8, atoms 1, screens 1로 구성된다.
• 홈페이지·공개 미리보기·소스 레지스트리의 범주가 같다고 가정하지 않는다. 제목의 132종은 공개 미리보기 카탈로그 기준이며, 소스 레지스트리 164개 전체를 현재 CLI로 설치·실행 검증한 수는 아니다.
• 스킬 문서는 별도로 163개 카탈로그를 언급해 수량 표기도 자료별로 다르다.

눈여겨볼 예시

• Apple Intelligence·Aurora·Nebula Orb·Liquid Metal·Skia Ripple: 셰이더와 GPU 표면 효과.
• Dia Text·Liquid Chrome Text·Gooey Text·Gradient Wave Text: 질감과 형태를 바꾸는 타이포그래피.
• Border Beam·Gooey Switch·Elastic Slider·Morph FAB·Save Button: 한 번의 제스처에 반응하는 작은 UI.
• Cinematic Carousel·Bouncy Accordion·Fan Menu·Tray·Gooey Popover: 모바일 화면에서 움직임과 제스처를 조합하는 구성 요소.

실제 코드 확인

• Accordion 원본은 index.tsx·presets.ts·types.ts의 3개 파일이다.
• index.tsx에서 react-native·react-native-reanimated·expo-haptics·expo-blur·@expo/vector-icons 및 로컬 presets/types import를 확인했다. useSharedValue·useAnimatedStyle·withTiming으로 동작을 구성한다.
• Accordion 수동 설치 안내에는 별도의 blur 라이브러리 표기가 있지만 현재 저장소 원본은 expo-blur를 import한다. 필요한 패키지는 실제로 가져온 파일의 import와 대조한다.
• 문서 예제에 나오는 폰트·아이콘·safe-area·Expo Router 등의 화면용 설정도 복사한 본체의 필수 의존성과 구분한다.

설치·네이티브 환경

• 프로젝트 초기화: npx reacticx init
• 목록 확인: npx reacticx list
• 개별 소스 추가: npx reacticx add accordion
• 새 Expo 앱 생성: npx reacticx create
• CLI는 component.config.json의 출력 위치와 alias를 사용하고 컴포넌트의 import 경로를 다시 맞춘다. 타입·예제·공유 helper 포함 여부와 누락 npm 의존성 처리 정책도 설정할 수 있다.
• 기본 네이티브 기반은 Reanimated·Gesture Handler·SVG, 효과에 따라 Skia·Worklets·Haptics·Blur·아이콘 등의 추가 모듈을 사용한다. 선택한 컴포넌트별 의존성을 확인한다.
• 설치 문서는 일부 구성에 development build가 필요하며 모든 컴포넌트를 Expo Go에서 사용할 수 있는 것은 아니라고 안내한다. Babel/Worklets와 GestureHandlerRootView 설정은 사용하는 버전에 맞춰 적용한다.
• 이번 작업에서는 실제 앱을 설치·빌드하거나 동작을 측정하지 않았다.

MCP·에이전트 자료

• @reacticx/mcp는 stdio MCP 서버. 목록 검색·실제 소스·props 타입·예제·설치 상태·소스 복사·diff 등을 제공하고 --read-only 모드를 지원한다.
• using-reacticx 스킬은 컴포넌트·CLI·MCP·설정 레퍼런스를 통해 복사 중심 워크플로와 파일별 의존성을 안내한다.
• CLI 문서는 R2의 파일 인덱스와 해시로 배포 파일을 확인한 뒤 복사한다고 설명한다. 저장소 manifest와 실제 배포 bucket 목록은 별도 자료로 구분한다.
• 이번 북마크 작업에서는 MCP·스킬 설치나 전역 설정 변경을 하지 않고 제공 자료로 확인했다.

기존 북마크와 비교

• PanelUI는 Uniwind 테마·폼·차트·AI UI까지 넓게 덮는 Expo UI 시스템이며 패키지와 소스 복사 양쪽을 제공한다. Reacticx는 Skia 시각 효과와 촉각·제스처 모션의 비중이 높고 소스 복사가 중심이다.
• BNA UI는 미디어·폼·차트와 앱 생성·백엔드 스타터를 함께 다룬다. Reacticx는 셰이더·텍스트·마이크로 인터랙션·모바일 화면 연출을 탐색할 때 참고하기 좋다.
• Native Bloom은 여러 제작자의 사례를 영상·원본 링크로 모으는 탐색 카탈로그다. Reacticx는 자체 소스와 MIT 라이선스·CLI·MCP를 제공한다.
• Cuvii Labs는 웹 React의 GSAP/WebGL 효과이고 Motion Core는 Svelte의 GSAP/OGL이다. Reacticx의 코드는 React Native의 Reanimated/Skia 기반이므로 각 런타임을 구분한다.
• Kidow / Frontend / UI Components에 분류한다.

출처·라이선스

• 공식 라이선스 문서와 저장소 LICENSE에서 MIT를 확인했다.
• 공식: https://www.reacticx.com/
• 카탈로그: https://www.reacticx.com/components-preview
• 시작·설치: https://www.reacticx.com/docs / https://www.reacticx.com/docs/installation
• CLI·MCP·스킬: https://www.reacticx.com/docs/cli / https://www.reacticx.com/docs/mcp / https://www.reacticx.com/docs/skills
• 저장소: https://github.com/rit3zh/reacticx
• 라이선스: https://github.com/rit3zh/reacticx/blob/main/LICENSE
• 확인일: 2026-10-04.

무엇을 제공하나

• 고전 Warcraft III RTS 인터페이스의 금속 프레임·거친 표면·진영 색상·판타지 분위기를 현대 웹 UI에 적용하는 팬 프로젝트.
• 제작자 TheOrcDev. 공식 홈페이지는 Fan made / No affiliation을 명시한다.
• 문서는 React·Next.js 등 현대 프레임워크 활용을 안내하며 실제 배포 소스는 React/TypeScript와 CSS다. 모든 프레임워크의 네이티브 구현이 있다고 해석하지 않는다.
• 보편적인 shadcn UI 전체를 덮는 키트보다 특정 게임 테마를 갖춘 화면에 적합하다.

수량과 설치 가능 범위

• 2026-10-04 공식 문서의 컴포넌트 목록은 18종: Accordion, Avatar, Badge, Button, Card, Checkbox, Cursor, Dropdown Menu, Input, Label, Pagination, Radio Group, Skeleton, Spinner, Tabs, Textarea, Toast, Tooltip.
• 저장소 registry.json은 registry:component 16개이며 Tabs·Toast가 빠져 있다.
• 문서에 적힌 https://warcraftcn.com/r/tabs.json 및 /r/toast.json은 직접 요청 시 모두 HTTP 404였다. 데모·문서 존재와 CLI 배포를 구분해야 한다.
• Button·Checkbox의 배포 JSON은 HTTP 200과 실제 파일 내용을 확인했다. 레지스트리 16개 전부를 설치·실행한 결과는 아니다.

스타일과 변형

• Button은 Standard / With Frame 두 예시를 제공한다. border-image 기반의 텍스처 프레임을 사용한다.
• Checkbox는 default / human / orc / elf / undead 진영 변형과 disabled 상태를 문서화한다.
• Avatar는 영웅·유닛 초상화, Radio Group은 보석 소켓·금빛 효과, Dropdown Menu는 이미지 프레임, Tooltip은 희귀도별 변형을 다룬다.
• Cursor·Skeleton·Spinner·Pagination 같은 작은 조각도 포함한다. 진영별 예시를 독립 컴포넌트 수로 세지 않았다.

설치·코드에서 확인한 점

• 버튼 설치: pnpm dlx shadcn@latest add https://warcraftcn.com/r/button.json
• 버튼 사용 경로: @/components/ui/warcraftcn/button
• 버튼 JSON에는 button.tsx, 공유 styles/warcraft.css, 버튼 프레임 이미지 4개가 있다.
• 실제 TSX는 @radix-ui/react-slot·class-variance-authority·@/lib/utils와 공유 CSS를 import한다. 버튼 JSON의 npm dependencies 필드는 비어 있고 registryDependencies도 빈 배열이므로 기존 프로젝트의 해당 의존성과 cn 유틸을 확인해야 한다.
• Checkbox JSON은 radix-ui 의존성을 명시하며 CheckboxPrimitive와 class-variance-authority·cn·공유 CSS를 사용한다.
• 이미지 파일이 함께 내려오더라도 확인한 공유 CSS는 https://warcraftcn.com/warcraftcn/... 프레임 URL과 Google Fonts의 Cinzel을 직접 참조한다. 완전한 로컬 에셋 구성으로 옮길 때는 CSS URL도 함께 정리한다.
• 이번 작업은 문서·소스·설치 JSON을 조사한 것으로 프로젝트 설치나 런타임 검증은 수행하지 않았다.

기존 북마크와 비교

• 8bit/cnlibs는 shadcn의 폭넓은 컨트롤을 8비트 스타일로 제공한다. warcraftcn은 Warcraft III의 프레임·진영·게임 UI 분위기에 더 좁게 집중한다.
• nostalgia-ui는 Mac OS 9 화면을 이미지 없이 CSS로 재현한다. warcraftcn의 확인한 버튼·프레임은 이미지 에셋과 border-image가 중심이다.
• Afterglow는 터미널·CRT·인광색 테마 중심이다. warcraftcn은 중세 판타지·RTS 화면 스타일을 만드는 자료다.
• Arlan Vault는 개별 시각 효과 실험과 프롬프트 모음이다. warcraftcn은 특정 미감을 공유하는 React UI 조각을 shadcn 방식으로 가져오는 워크플로다.
• Kidow / Frontend / UI Components에 분류한다.

출처·라이선스

• 공식 저장소 README의 MIT 안내와 실제 license.md 내용을 확인했다.
• 팬메이드·비공식 표기를 함께 기록하며 MIT 코드 표기를 공식 Warcraft 브랜드 제휴로 해석하지 않는다.
• 공식: https://www.warcraftcn.com/
• 문서 목록: https://www.warcraftcn.com/docs/components
• 저장소: https://github.com/TheOrcDev/warcraftcn-ui
• 라이선스: https://github.com/TheOrcDev/warcraftcn-ui/blob/main/license.md
• 레지스트리 원본: https://github.com/TheOrcDev/warcraftcn-ui/blob/main/registry.json
• 확인일: 2026-10-04.

어떤 자료인가

• Jaret Peerson의 CSS-first 웹 컴포넌트·애니메이션·인터랙션 모음. 공개 데모와 저장소 소스를 무료로 열람할 수 있다.
• 개발 소스와 웹사이트 레퍼런스를 함께 탐색한다. Home은 컴포넌트 카탈로그, Inspiration은 외부 웹사이트 아카이브다.
• vanilla HTML·CSS·JavaScript 중심이며 사이트는 Astro로 구성한다. README는 복잡한 시퀀스에 GSAP을 선택적으로 사용한다고 설명한다.
• React/Svelte 전용 컴포넌트 패키지나 설치 레지스트리로 안내하지 않는다.

실제 규모와 표기 차이

• 2026-10-04 공개 data/content-components.json 실측 16종.
• 분류: Gallery 3, Scroll 3, Hover Animation 2, Graphs·Navigation·Marquees·Structure·Page Transitions·Carousel·Forms·Dropdown 각 1종.
• 첫 화면에 보이는 6개는 전체 수가 아니다. contentGrid.astro에서 최초 6개만 미리 렌더링하는 구조를 확인했다.
• README는 18 published components를 안내하지만 현재 공개 카탈로그에는 16개가 있다. 제목의 수량은 현재 공개 데이터 기준이며, 저장소의 추가 파일이나 하위 페이지를 별도 컴포넌트로 합산하지 않았다.
• 별도 data/content-inspiration.json은 웹사이트 레퍼런스 57개. 산업·AI·SaaS·식음료·에이전시·개발·포트폴리오 등 14개 범주를 포함한다.

공개 컴포넌트 16개

GitHub Contributions, Reveal Menu Items on Hover, Infinite Marquee (Scroll-Direction), Smooth Expand/Collapse Accordion, Pixelated Page Transition, Pixelated Section Transition (Scroll-Driven), Simple Horizontal Carousel, Staggered Grid with Image Clip Path, Lightbox with Controls, Form Validation, Timed Content Section, Expand Image on Hover, Circle Mask Reveal on Hover, Scroll Snap, Scroll-Driven Card Reveal, Expandable Directory.

코드 활용 방식

• Scroll-Driven Card Reveal 상세 페이지에서 HTML·CSS·JS 세 링크가 실제 GitHub 원본 파일로 연결되는 것을 확인했다.
• HTML 링크는 src/pages/components/scrollDrivenCardReveal.astro, CSS는 src/styles/components/scrollDrivenCardReveal.css, JS는 public/scripts/components/scrollDrivenCardReveal.js를 제공한다.
• Astro 파일은 BaseLayout·NavMain 같은 사이트 내부 요소를 import한다. 다른 프로젝트에 옮길 때는 필요한 마크업·스타일·스크립트와 에셋을 분리해 연결한다. 링크된 Astro 페이지를 그대로 범용 HTML 파일로 취급하지 않는다.
• GitHub Contributions는 외부 github-contributions-api.jogruber.de 서비스에서 예시 계정 데이터를 가져온다. 다른 사용자로 바꿀 때는 해당 스크립트의 계정 값을 변경하는 구조다.
• 설치 패키지·CLI·React/Svelte 래퍼 안내는 확인하지 못했다. 데모를 보고 소스 파일을 직접 참고하는 워크플로에 적합하다.
• 카테고리·검색·정렬로 찾고, Inspiration의 외부 사이트는 화면과 인터랙션 레퍼런스로 활용한다.

기존 북마크와 비교

• HyperUI는 Tailwind HTML을 복사하는 폭넓은 UI 모음이다. Toggle Supply는 CSS 중심의 개별 인터랙션과 실제 데모·원본 파일에 초점을 둔다.
• Arlan Vault는 모션 프롬프트와 React/TypeScript 상세 실험을 함께 제공한다. Toggle Supply는 HTML·CSS·JS 파일 경로를 직접 열어 구현을 읽는 방식이다.
• Cuvii Labs는 GSAP 신호 모션·WebGL 인광 효과의 React TSX를 복사한다. Toggle Supply는 폼·디렉터리·라이트박스·스크롤·페이지 전환 등 일반 웹 인터랙션을 함께 다룬다.
• Motion Core는 Svelte 5·GSAP/OGL 효과를 CLI로 설치한다. Toggle Supply의 원본은 Astro 페이지·CSS·JavaScript로 제공된다.
• Theme Toggles는 테마 전환 토글 버튼을 다루는 별도의 북마크다. 이 사이트는 다양한 웹 컴포넌트와 사이트 영감 자료의 모음이다.
• 주요 제공물인 구현 소스를 기준으로 Kidow / Frontend / UI Components에 분류한다.

출처·라이선스

• 공식 저장소의 LICENSE와 GitHub 라이선스 메타데이터에서 MIT를 확인했다.
• 홈페이지: https://www.toggle.supply/
• 영감 자료: https://www.toggle.supply/inspiration/
• 컴포넌트 데이터: https://www.toggle.supply/data/content-components.json
• 영감 데이터: https://www.toggle.supply/data/content-inspiration.json
• 저장소: https://github.com/jaretpeerson/toggleSupply
• 라이선스: https://github.com/jaretpeerson/toggleSupply/blob/main/LICENSE
• 확인일: 2026-10-04.

무엇을 제공하나

• Svelte 5 runes·snippets와 Tailwind CSS v4를 사용하는 애니메이션 컴포넌트 모음. GSAP 타임라인과 OGL/WebGL을 Svelte API로 감싼다.
• 현재 공개 registry/registry.json 버전 0.17.1의 components 키를 실측하면 46종이다.
• 분류: Canvas 24, Showcase 7, Typography 7, Pointer 4, Navigation 2, Layout 1, Transition 1. 여러 내부 .svelte·유틸·셰이더 파일을 각각 별도 컴포넌트로 세지 않았다.
• 기본 컨트롤을 광범위하게 대체하는 UI 키트보다 랜딩·전시·이미지·텍스트·포인터 효과에 적합하다.

주요 예시와 실제 의존성

• Text Loop: GSAP으로 문구 교체·블러·수직 이동을 조합한다.
• Magnetic: GSAP 기반 포인터에 달라붙는 스프링 래퍼.
• Card Stack: 스크롤 시 상단에 붙고 축소되는 카드 스택, GSAP 사용.
• Fluid Simulation: 포인터 유체 효과, OGL 의존. 문서에서 dissipation·pointerSize·color·velocityDissipation·pressureIterations를 조절하는 예제와 Svelte 코드 탭을 확인했다.
• Globe: Fresnel 조명·대기·랜드 메시·마커 레이어, GSAP + OGL.
• Infinite Gallery: 질감 평면이 계속 흐르는 3D 갤러리, OGL.
• Glass Logo: SVG 입력을 SDF 셰이더로 굴절하는 유리 로고, OGL.
• Watercolor Image: anisotropic Kuwahara 필터를 쓰는 수채화 이미지, OGL.
• Card 3D: 얼굴 추적에 반응하는 카드 패럴랙스, OGL + @mediapipe/tasks-vision. 해당 문서는 카메라 권한이 필요하다고 명시한다. 이 요구를 라이브러리 전체의 필수 조건으로 확대하지 않는다.

설치·소유 방식

• 초기화: npx @motion-core/cli init
• 개별 추가 예: npx @motion-core/cli add fluid-simulation
• 설치 계획만 보기: npx @motion-core/cli add infinite-gallery --dry-run
• CLI는 선택한 컴포넌트와 내부 의존성 파일을 내려받아 프로젝트에 쓰고, barrel export와 필요한 npm 의존성을 갱신한다. 변경된 로컬 파일에는 차이를 보여 주고 덮어쓰기 여부를 선택하게 한다고 문서가 설명한다.
• 기본 위치는 $lib/motion-core이며 motion-core.json에서 components·helpers·utils·assets 경로와 import alias를 조정한다.
• CLI 레지스트리 요구 사항은 Svelte ^5.0.0, Tailwind CSS ^4.1.0. 기본 clsx·tailwind-merge와 컴포넌트별 GSAP/OGL/MediaPipe 등의 의존성을 구분한다.
• 문서 예제의 import "motion-core"와 CLI 설치 후 import "$lib/motion-core" 경로를 구분한다. CLI가 복사한 파일을 편집하는 워크플로가 주 사용 경로다.
• CLI 패키지 @motion-core/cli 0.6.1과 컴포넌트 소스 버전 0.17.1은 별개다. 이번 작업에서는 라이브러리를 설치하거나 실행하지 않고 배포 레지스트리·문서·저장소를 확인했다.

기존 북마크와 비교

• Motion Primitives는 저장된 설명 기준 React + Motion/Framer Motion 중심이다. Motion Core는 Svelte 5 + GSAP/OGL이며 Canvas 효과의 비중이 높다.
• Cuvii Labs는 React TSX로 신호 모션·인광 룩을 복사하는 실험실이다. Motion Core는 Svelte용 효과를 CLI와 파일·의존성 목록으로 배포한다.
• Cube Motion은 네 가지 고정된 기본 모션을 Web Animations API로 제공하고 여러 프레임워크 어댑터를 둔다. Motion Core는 유체·3D 갤러리·유리·수채화처럼 개별 연출을 직접 조절할 때 참고하기 좋다.
• 23rd는 React/Svelte 5의 의견 있는 UI 기본값을 다루는 레지스트리다. Motion Core는 Svelte 기반 시각 효과와 creative coding 패턴에 집중한다.
• Fluid Functionalism은 React 폼·메뉴·팝업의 공유 인터랙션 규칙을 다룬다. Motion Core는 Svelte와 GSAP/OGL 조합에서 별도로 활용할 수 있다.

문서·라이선스

• 문서는 조작 가능한 props·Svelte 코드·Markdown 복사·원문 GitHub 링크를 제공한다.
• 저장소 LICENSE와 GitHub 라이선스 메타데이터에서 MIT를 확인했다.
• 공식 링크 github.com/motion-core/motion-core는 현재 github.com/kaltwrk/motion-core로 연결된다.
• 홈페이지: https://motion-core.dev/
• 문서: https://motion-core.dev/docs
• CLI 설치·추가: https://motion-core.dev/docs/cli-guide/quick-start / https://motion-core.dev/docs/cli-guide/add
• 실측 레지스트리: https://motion-core.dev/registry/registry.json
• 라이선스: https://github.com/kaltwrk/motion-core/blob/master/LICENSE
• 확인일: 2026-10-04.

무엇을 제공하나

• Arlan Marat의 개인 UI·모션 실험 저장소. 무료로 갤러리와 상세 페이지를 열람할 수 있다.
• 2026-10-04 실제 DOM 기준 Copy prompt 버튼이 있는 카드 53개, 제목·날짜와 상세 페이지 링크가 있는 실험 18개.
• 이 숫자는 서로 다른 제공 방식의 항목 수다. 설치 가능한 컴포넌트 71종이라는 의미는 아니다. 버튼 없는 빈 미리보기 카드 하나는 수량에서 제외했다.
• 갤러리 프롬프트 카드는 타이포그래피 변화·글리치·입자·커서·픽셀/ASCII·이미지 배열 등 시각적 결과를 보여 준다. 프롬프트 복사 기능은 UI에 제공되지만 이번 환경에서 클립보드 본문을 회수하지 못해 전체 프롬프트의 형식이나 기술 스택을 단정하지 않았다.
• 상세 실험은 실제 코드 탭과 설명, Credits, 일부 원출처 링크를 함께 제공한다. Copy prompt와 Copy markdown 버튼도 있다.

상세 실험 18개

Arcade pixel, Holo, Pixel brushes, Fade motion, Liquid UI, Kinetic typography, Apple's corners, Ransom note, Chromatic glow, Realistic emboss, The typer, The art of color depth, Ghosty reveal, Symbols effect, Dia Browser's gradient, Figma vector editor, Amo hover button, Midjourney Medical's ASCII.

직접 확인한 코드

• Liquid UI: sdf.ts, marching-squares.ts, engine.ts, LiquidGroup.tsx, LiquidCard.tsx, scenes.tsx, playground.tsx의 7개 파일. SDF와 marching squares로 인접 카드의 결합 윤곽을 만들며 React 래퍼를 제공한다. 데모는 카드 드래그와 결합 강도 조절을 안내한다. LiquidGroup.tsx의 실제 코드에서 react와 로컬 engine/sdf 의존성을 확인했다.
• Apple's corners: superellipse.ts, tokens.ts, Squircle.tsx, parts.tsx, playground.tsx의 5개 파일. SVG 경로 생성과 모서리 smoothing을 다루고 native corner-shape 방식도 보여 준다. Credits에는 Figma의 squircle 관련 원문 링크가 있다.
• 위 두 실험은 소스 제공을 실제 확인한 표본이다. 상세 실험 18개 전체의 파일 수·의존성을 조사한 결과로 확대하지 않는다.

기존 북마크와 비교

• Kage는 실제 제품 화면을 나눈 디자인 참고 자료와 생성 프롬프트 중심이다. Vault는 제작자의 모션 실험을 직접 움직여 보고, 상세 항목의 구현 소스까지 참고하는 데 적합하다.
• VibePrompts는 섹션별 Tailwind 레이아웃 프롬프트와 HTML 중심이다. Vault는 타이포그래피·빛·질감·픽셀·유체 결합 같은 개별 시각 효과에 초점을 둔다.
• Cuvii Labs는 GSAP 신호 모션·WebGL 인광 효과의 React TSX 복사가 중심이다. Vault는 프롬프트 카드와 파일별 상세 코드가 섞이고, 색·곡선·표면·입자 등 효과 범위가 더 다양하다.
• Appllama Loader Buttons는 25개 로딩 버튼을 관찰하는 모션 갤러리다. Vault의 확인한 상세 항목에는 재사용에 참고할 실제 TypeScript·React 소스가 있어 Kidow / Frontend / UI Components에 분류했다.

사용할 때

• 화면·움직임의 목표를 전달할 때는 갤러리 프롬프트, 직접 구현을 살펴볼 때는 상세 페이지의 관련 파일 묶음을 참고한다.
• npm 패키지·shadcn 레지스트리·통합 설치 안내는 확인되지 않았다. 로컬 파일 import가 있어 선택한 TSX 한 파일만으로 동작한다고 가정하지 않는다.
• 갤러리와 확인한 두 상세 페이지에 MIT → free to copy 및 MIT 라이선스 링크가 있다. 개별 실험의 Credits·Source도 함께 보관해 재현 대상과 원출처를 구분한다.

공식: https://www.arlan.me/vault 확인한 상세 코드: https://www.arlan.me/vault/liquid-ui / https://www.arlan.me/vault/squircle 확인일: 2026-10-04.

어떤 자료인가

• jaimin(@jaimintf)·Appllama가 만든 브라우저 기반 인터페이스 모션 실험. 페이지의 25개 버튼과 등록 모듈 25개가 일치한다.
• 단독 스피너 모양보다 작은 로더 + 버튼 외형 + 작업 상태 문구의 조합을 참고하기 좋다. 버튼을 선택하면 해당 애니메이션을 다시 재생한다.
• WebGL2 13종, SVG 6종, Canvas 4종, CSS/DOM 2종. React·SwiftUI·React Native 전용 라이브러리로 안내하지 않는다.

눈여겨볼 예시

• Fibonacci Breather: 피보나치 배열 미세 구슬 / Gathering.
• Glass Tide Lens: 액체 렌즈와 지연 굴절 / Focusing.
• Binary Metaball Mitosis: 두 덩어리의 분리·합체 / Merging.
• Topology Courier: 420개 점의 지연된 대응 변화 / Mapping.
• Voxel Assembly Line: 64개 큐브의 조립 / Building.
• Orbital Calligraphy: SVG Bézier 대시 / Writing.
• Mechanical Iris: 여섯 날개의 조리개 / Opening.
• Braille Flipwave: 3D 점 행렬의 순차 뒤집기 / Flipping.

기존 북마크와 비교

• Shadcn Loaders는 실제 설치하는 순수 CSS 컴포넌트 하나에 변형 42종을 담는다. 이 사이트는 버튼 안의 로더·문구·표면을 함께 관찰하는 모션 레퍼런스에 적합하다.
• HyperUI는 복사해 쓰는 Tailwind HTML과 로더 예제를 제공한다. 이 사이트에서는 복사 버튼·패키지 설치 안내·저장소 링크가 확인되지 않았다.
• Cuvii Labs는 GSAP 모션·WebGL 효과의 React TSX를 복사할 수 있다. Appllama의 공개 브라우저 JS 모듈은 구현 방식 조사에는 도움이 되지만, 재사용용 배포나 라이선스 허용 범위는 별도 확인이 필요하다.
• 따라서 Kidow / Design에 분류한다.

구현 참고

• 전체 Pause motion / Play motion 제어와 prefers-reduced-motion 대응이 있다.
• 기본 렌더링 목표는 30fps. URL의 fps 옵션은 15~60fps로 제한한다. 화면 밖 항목은 렌더링을 건너뛰고 WebGL 인스턴스는 일정 지연 뒤 해제한다.
• 각 WebGL 디자인은 공통 core/webgl.js에 의존하며 Canvas 디자인은 core/canvas.js에 의존한다. 디자인 파일 하나만 독립 배포용 컴포넌트로 취급하지 않는다.
• 데모의 반복 모션·상태 문구를 실제 진행률이나 성공·실패 처리로 해석하지 않는다. 제품 적용 시 비동기 작업 상태와 접근성 안내를 연결해야 한다.
• 무료로 갤러리를 볼 수 있으나 페이지·확인한 모듈에서 MIT 등 코드 재사용 라이선스는 찾지 못했다.

확인: 공식 페이지 https://loader-buttons.appllama.io/ 및 공개 src/main.js, src/designs/index.js와 등록 모듈 25개. 2026-10-04.

Expo 앱에서 버튼·입력·오버레이·차트·업무 화면을 한 디자인 시스템으로 묶고 싶을 때의 후보다. 공통 토큰과 6개 테마가 색·모서리까지 같이 바꾸므로 화면별 스타일 수정이 쌓이는 상황에 맞는다. 기본 프리미티브 외에 Planner·Table·Timeline·Flow, 채팅·추론·출처·계획 표시까지 있어 앱 안의 데이터/AI 작업 화면을 같은 문법으로 구성하는 용도로 볼 수 있다.

저장된 BNA UI는 소스를 가져오며 카메라·오디오·백엔드 스타터와 에이전트 MCP까지 넓게 묶는 Expo 후보였고, PanelUI는 Uniwind/Tailwind 토큰과 공통 테마를 전제로 패키지 사용·소스 복사를 함께 제공한다. tetra ui는 네이티브 프리미티브를 골라 가져오는 후보로 비교하면 된다. Native Bloom은 이런 라이브러리 바깥의 사례를 영상과 원본 링크로 찾는 Design 카탈로그이므로 설치 가능한 기반 UI를 고르는 이 항목과 역할이 다르다.

기본 경로는 panelui-native를 의존성으로 설치해 import하는 방식이다. 수정 폭이 크면 npx panelui-cli@latest init 뒤 add item으로 필요한 컴포넌트를 프로젝트 안에 가져올 수 있고, 두 방식을 섞어 특정 컴포넌트만 포크할 수도 있다. 패키지는 버전 업데이트로 테마까지 함께 갱신되지만 복사한 소스와 theme.css는 직접 관리한다. CLI add --overwrite는 로컬 수정과 충돌할 수 있으므로 업데이트 방식을 선택할 때 확인한다.

스타일 설정은 라이브러리 설치 하나로 끝나지 않는다. Uniwind Metro 설정, global.css의 Tailwind/Uniwind/테마 import와 @source, 앱 진입점의 CSS import 및 PanelUIProvider가 필요하다. Moon·Grass 계열은 Metro extraThemes에 등록하고 개발 서버를 다시 시작해야 한다. Expo Router/React Navigation은 자기 배경색을 그리므로 토큰을 연결하지 않으면 라이브러리 테마를 바꿔도 화면 배경이 안 바뀐 것처럼 보일 수 있다는 문서 설명이 실무적으로 유용하다.

필수 네이티브 기반으로 Reanimated·Gesture Handler·Safe Area·SVG·Masked View·Linear Gradient 등이 있고, 기능에 따라 햅틱·블러·클립보드·키보드 제어·파일/스크린샷·MapLibre·@expo/ui 같은 optional peer를 추가한다. 패키지 peerDependencies와 optional 표기를 확인했다. 모든 선택 기능이 Expo Go에서 돌아간다고 해석하면 안 된다: Map 문서는 alpha이며 MapLibre 네이티브 렌더러·config plugin·개발 빌드가 필요하다고 명시한다.

native 렌더링은 Button·Switch·Slider·Select·BottomSheet 다섯 개에서 선택할 수 있다. @expo/ui가 없거나 웹이면 스타일 컴포넌트로 조용히 폴백하고, 네이티브 제어로 전환하면 플랫폼의 색·크기·폰트·프레스 동작을 사용하므로 PanelUI 테마 토큰·className과 일부 props는 적용되지 않는다. 디자인 시스템과 동일한 모양이 필요한 경우와 플랫폼 기본 모양이 필요한 경우를 구분해서 선택한다.

AI 문서는 beta 패턴이며 React Native의 스트리밍·키보드·토큰마다 재렌더되는 비용 등을 다룬다. Reasoning·Sources·Task·CodeBlock·Plan 등의 UI는 plain props를 받아 AI SDK 없이도 쓸 수 있다고 명시한다. 채팅 UI가 들어 있다고 모델·API·백엔드가 패키지에 자동으로 연결되는 것은 아니다. 접근성·UI 스레드 성능을 강조하지만 이번에는 문서·메타데이터·소스 목록을 확인한 것이며 실기기 접근성이나 성능을 직접 테스트하지 않았다.

2026-10-04 확인. 컴포넌트 138은 export 모듈 기준이고 서브컴포넌트 이름이나 데모의 수를 더한 값은 아니다. MIT 라이선스를 확인했으며 Map의 alpha 및 AI 문서의 beta 조건을 별도로 기록했다.

근거: https://panelui.dev/ · https://panelui.dev/docs/installation · https://panelui.dev/docs/cli · https://panelui.dev/docs/customization/theming · https://panelui.dev/docs/native · https://panelui.dev/docs/components/map · https://panelui.dev/docs/ai · https://github.com/panel-ui/PanelUI · https://www.npmjs.com/package/panelui-native

React Native 앱의 모션이나 특정 상호작용을 구현하기 전에 실제로 움직이는 사례를 보고, 사용 패키지와 원본 구현을 찾는 첫 검색 창으로 둘 곳이다. 숫자 전환·스프링·시트·제스처·셰이더처럼 정지 이미지로 판단하기 어려운 패턴을 영상으로 비교하는 점이 값이다. 이름을 모르는 상태에서도 필요한 모습과 움직임으로 찾고, 블록 하나를 고른 뒤 프로젝트에 어떻게 붙일지를 조사하는 흐름에 맞는다.

기존 Kage가 제품 화면을 분해해 에이전트 프롬프트로 넘기는 디자인 레퍼런스, UUI가 UI 영감을 찾아 모으는 갤러리였다면 이쪽은 React Native의 실제 모션·작성자·패키지·원본 링크에 초점이 있다. 그래서 같은 Design 컬렉션에 분류한다. BNA UI와 tetra ui는 소스를 설치해 앱의 기반 부품을 가져오는 후보이고, Native Bloom은 그 밖의 제작자와 사례까지 넓게 찾아주는 카탈로그다. 마음에 든 영상이 특정 라이브러리나 Expo 모듈을 쓰면 설치 판단은 해당 원본 문서에서 이어서 한다.

공개 Step counter number flow를 열면 Antonín Wingender 작성자, Number·Progress ring·Transition 분류, GitHub의 docs/content/docs/recipes/step-counter.mdx와 원 프로젝트 문서가 연결된다. 영상에 재생 속도와 확대 컨트롤이 있고, 블록 링크를 복사하거나 Use prompt로 에이전트에 넘기는 버튼을 제공한다. 프롬프트 영역은 Expo 또는 bare React Native 프로젝트의 기존 아키텍처를 보존하고 기본적으로 레퍼런스 영상에 맞추는 용도라고 설명한다. 이번에는 공개 페이지의 링크·UI를 확인했으며 프롬프트 본문이나 유료 문맥을 읽어 검증한 것은 아니다.

MCP는 URL을 등록하고 Native Bloom 계정으로 브라우저 인증하는 방식이라고 문서화했다. 별도 API 키는 요구하지 않는다. 자연어 search_blocks와 화면/흐름의 여러 부분을 한 번에 찾는 search_blocks_batch, 개별 블록 문맥 get_block, 분류의 용어·블록 수를 조회하는 list_catalog_terms가 있다. 무료는 하루 25회 검색(00:00 UTC 초기화)과 제목·영상·링크 중심 결과, spotlight 블록의 전체 문맥을 체험할 수 있다. Pro는 검색 무제한과 모든 오픈소스 블록의 전체 문맥을 제공한다. 이 세션에 MCP를 추가하거나 계정에 로그인한 것은 아니다.

Pro 결제는 원본 코드를 모두 구매하는 의미가 아니다. 서비스 약관은 구독을 큐레이션·정리·검색·제품 기능에 대한 접근으로 정의하고, 제3자 소프트웨어·소스·상업 디자인 자산의 라이선스를 주지 않는다고 명시한다. 외부 유료 키트는 모든 플랜에서 소스와 프롬프트가 제공되지 않는다. 무료/오픈소스 항목도 실제 적용 전에 각 GitHub/패키지의 라이선스와 의존성을 확인한다. MIT·open-source를 이 카탈로그 전체의 태그로 붙이지 않았다.

2026-10-04 확인. 무료 저장 12개를 넘어 취소하면 최신 12개만 보이고 나머지 저장은 삭제되지 않은 채 숨겨지며, 재구독하면 복원된다고 FAQ에 안내한다. 가격은 홈의 Yearly 선택 기준 Pro 월 환산 $8, Team 인당 월 환산 $12이고 실제 연간 결제다. 월간/분기 가격을 확인한 값으로 오인하지 않는다. 1,269개는 당시 카탈로그의 표시 수라 계속 달라질 수 있다.

근거: https://nativebloom.dev/ · https://nativebloom.dev/blocks?slug=step-counter-number-flow · https://nativebloom.dev/mcp · https://nativebloom.dev/terms

Expo 모바일 앱을 처음 구성하거나, 이미 있는 앱에 기본 UI·미디어 입력/재생·차트를 같은 테마로 추가할 때 볼 곳이다. 카메라·파일·오디오·키보드 회피·햅틱처럼 웹 UI를 그대로 가져와 해결할 수 없는 영역이 포함돼 있다. 선택한 소스를 앱 내부로 가져와 수정하는 방식이므로 디자인 언어를 맞추고 모바일 기능을 한 묶음으로 구성하려는 경우에 잘 맞는다.

저장된 tetra ui가 React Native의 bottom-sheet·swipeable·native-select 같은 프리미티브를 고르는 후보라면, BNA UI는 앱 생성 CLI·차트·카메라/오디오·백엔드 스타터·에이전트 도구까지 범위가 넓다. Uilora의 모바일 묶음은 큰 웹/모바일 모음의 일부였고 자체 재배포 제한 라이선스로 기록돼 있지만, 이쪽은 Expo 중심이며 저장소 라이선스가 MIT다. 웹용 audiocn의 믹서·파형 UI와 용도가 일부 닿아도 BNA의 소스는 React Native/Expo 모듈을 쓰므로 DOM용 React 컴포넌트로 대체해 읽지 않는다.

새 앱은 npx bna-ui init my-app, 기존 Expo 프로젝트는 npx bna-ui add button 또는 add card input처럼 시작한다. 문서의 add --dry-run은 가져올 항목을 미리 확인하는 방법이고 --overwrite는 기존 파일을 덮어쓰므로 사용 의도를 확인해야 한다. CLI는 https://ui.ahmedbna.com/r에서 소스를 받아 components·hooks·providers·theme에 설치한다. 기본 설치만으로 백엔드를 선택할 필요는 없으며 Convex·Supabase·Firebase/인증 흐름은 해당 스타터가 필요한 경우에 보는 별도 선택지다.

버튼 하나도 독립 TSX 하나만으로 끝나지 않는다. 실제 /r/button.json을 조회하니 파일 12개가 들어 있었고 useColor·useHaptics·mode-provider·색/전역 상수와 text/view/icon/spinner를 함께 포함했다. npm 의존성은 expo-haptics·lucide-react-native·react-native-reanimated·react-native-svg·react-native-worklets였다. Line Chart 표본은 SVG·Reanimated·Gesture Handler·Worklets, Audio Recorder 표본은 expo-audio·expo-asset 및 재생기/파형/버튼 쪽을 요구한다. 파일 개수와 의존성은 UI 개수와 구분해서 본다.

스타일링은 문서의 StyleSheet·Colors·글로벌 상수 및 useColor/모드 provider를 중심으로 하며 Tailwind·NativeWind를 전제하는 설치로 확인된 것은 아니다. 저장소의 현재 기본 스타터 package.json은 Expo 57·React Native 0.86·React 19.2를 사용하지만 이것을 모든 기존 프로젝트의 최소 지원 버전으로 해석하지 않는다. 기존 앱에서는 Expo SDK와 네이티브 의존성의 호환, 카메라/마이크/파일 접근 권한, 실제 기기의 제스처·키보드·햅틱 동작을 확인할 필요가 있다. 이번 확인은 문서·소스·레지스트리 조회이며 앱을 설치하거나 실기기에서 실행한 테스트는 아니다.

AI 도구는 npx bna-ui mcp로 제공하며 list_components/search_components/get_component/get_component_source/get_install_plan/get_docs를 문서화했다. get_install_plan은 파일과 npm 패키지·명령을 알려 주는 읽기 도구로 직접 설치하지 않는다. Rules for agents·Claude Skill 문서도 있어 코딩 에이전트가 웹 JSX 대신 React Native 컴포넌트를 고르게 하는 참고 경로가 있다. 이름 때문에 shadcn CLI로 설치한다고 가정하지 말 것: /docs/shadcn은 원 프로젝트와 기술에 대한 감사 페이지이고 문서가 안내하는 설치 명령은 자체 bna-ui CLI다.

2026-10-04 확인. 공식 문서·GitHub 원본 목록·LICENSE·버튼의 실서비스 레지스트리·npm 메타데이터를 대조했다.

근거: https://ui.ahmedbna.com/ · https://ui.ahmedbna.com/docs/cli · https://ui.ahmedbna.com/docs/theming · https://ui.ahmedbna.com/docs/mcp · https://ui.ahmedbna.com/r/button.json · https://github.com/ahmedbna/ui · https://www.npmjs.com/package/bna-ui

SF·신호 장치·터미널·관제 화면 같은 시각 언어를 잡거나, 짧은 시작/전환 모션과 화면의 인광 질감을 공부할 때 볼 곳이다. Motion의 번쩍임·잔상·스캔·조립·분할 진입은 상태 표시나 타이틀·로고 연출의 레퍼런스가 되고, Phosphor는 같은 로고·문자·이미지·항법 화면을 여러 룩으로 비교하므로 특정 질감을 고르는 데 유용하다. 사이트 자체의 밀도 높은 눈금·그리드·동아시아 문자·진단 패널도 디자인 참고 자료로 볼 수 있다.

같은 제작자의 저장된 Solaris Sky는 태양·대기·하늘이라는 한 장면의 셰이더를 깊게 다루고, 여기서는 신호/인광 모션 여러 종류를 비교한다. Emerald UI가 스크롤 기반 연출을 찾을 때의 항목이었다면 이쪽은 짧은 신호 모션과 셰이더 질감이 중심이다. Skecher UI처럼 시연과 코드가 함께 있는 모션 단품을 찾는 용도와 가깝지만, 일반 제품의 버튼·폼·네비게이션 기반을 대체할 대상은 아니다. 효과가 콘셉트와 맞는 화면에 필요한 한두 개를 골라 가져오는 편이 낫다.

설치용 패키지 이름이나 shadcn 레지스트리를 확인한 것은 아니다. 페이지의 COPY가 주는 컴포넌트를 직접 옮기는 방식이다. GLITCH 복사 코드는 'use client' React TSX이며 gsap·@gsap/react 설치가 필요하다. SVG 사각형 프레임을 GSAP 타임라인으로 바꾸고 마운트 시 재생, 해제 시 timeline.kill()을 수행한다. 순수 CSS 효과라고 가정해서 복사하면 동작하지 않는다.

Phosphor의 SHADOW_MASK 복사 코드는 별도 Three.js import 없이 React와 WebGL/GLSL를 사용한다. source는 HTMLCanvasElement를 만드는 factory 또는 비동기 loader로 받고, cells·cellStyles·interaction과 activateCell/moveCell/deactivateCell/triggerCell/reset/refresh 핸들을 제공한다. 기본 calibrationSource가 있으므로 임의의 DOM을 감싸기만 하면 사이트의 로고·항법 UI가 그대로 나오는 API로 읽으면 안 된다. 자기 콘텐츠를 넘기는 source 구성을 확인해야 한다. 소스가 약 2.9만 자이므로 소형 모션 표본보다 적용·유지보수 부담이 크다.

코드 복사·수정·자유 사용 문구는 확인했지만 MIT 등 표준 라이선스나 공개 저장소 링크는 페이지에서 찾지 못했다. 특히 제작자가 AI로 재현했고 원출처가 불명확한 사례가 있다고 밝히므로 코드 공개와 원작·데모 로고의 권리까지 한 번에 해결됐다고 해석하지 않는다. Jerry Liu의 Motion 원작 크레딧을 남겨 두고 라이선스 불명확으로 분류했다.

GLITCH와 SHADOW_MASK 복사 표본 모두 prefers-reduced-motion 처리는 보이지 않았다. 서비스에 넣을 때는 모션 감소 옵션·멈춤/정적 대안과 과도한 깜빡임을 검토할 필요가 있다. WebGL 표본은 requestAnimationFrame과 devicePixelRatio를 사용하므로 모바일·고해상도 화면에서 GPU/프레임 비용을 확인한다. 이 확인은 복사 소스를 읽은 결과이며 기기별 성능이나 접근성을 실제 테스트한 것은 아니다.

2026-10-04 확인. 루트는 /volume/motion으로 이동하며 메뉴에서 /volume/phosphor도 제공한다. 정적 루트의 텍스트만 읽으면 Motion 18종만 보이기 쉬워 두 볼륨과 실제 COPY 동작을 확인했다.

근거: https://labs.cuvii.dev/ · https://labs.cuvii.dev/volume/motion · https://labs.cuvii.dev/volume/phosphor · https://x.com/SloppyJ44/status/1846584501847142705 · https://x.com/SloppyJ44/status/1986086639391670290

⚠️ 2026-10-06 재확인: 구성과 가격이 이틀 만에 크게 바뀌었다 — 전체 54종+로 늘고 모션 범주가 생겼으며, 무료는 27종(레지스트리 실측), Pro는 개인 창립자가 $99(선착순 25명, 이후 $199)·팀 10석 $499로 바뀌었다. 아래 10-04 기록의 개수·가격은 당시 기준이다. 하루 단위로 항목이 추가되는 초기 프로젝트라 쓸 때마다 무료/Pro 경계를 다시 확인할 것.

설정 화면·온보딩·AI 작업 승인·댓글 편집처럼 사용자가 무엇을 해야 하는지와 결과가 어떻게 확인되는지를 함께 설계할 때 가져올 곳이다. 기본 버튼 세트를 늘리기보다 연결 설정의 저장 상태, 추천을 수락한 뒤 되돌리기, 승인/보류 후 접힘, 완료한 체크리스트의 진행률, 알림을 닫고 다음 항목을 드러내는 흐름을 참고할 가치가 있다. 무료 항목만으로도 제품 화면의 작은 상호작용을 상당 부분 가져올 수 있다.

저장된 HoverUI가 버튼·카드·텍스트의 호버 효과를, Emerald UI가 스크롤 기반 연출을 맡는다면 이쪽은 실제 제품 안의 상태 전환과 업무 흐름에 가깝다. ui.amarjay처럼 shadcn 기본 부품의 변형을 수집하는 용도보다 Comments Panel, Decision Inbox, Integration Settings 같은 기능 단위를 골라 보는 편이 낫다. 일러스트는 빈 상태·탭 과부하·응답 없는 채팅·연결 관계를 설명하는 보조 화면에 쓸 수 있다.

React 19가 기준이며 파일 안에 스타일이 들어 있어 Tailwind가 없는 프로젝트에도 넣을 수 있다. shadcn은 설치 경로이고 Radix·Base UI·Tailwind를 런타임으로 요구하는 라이브러리는 아니다. 무료 설치는 npx shadcn@latest add https://www.affectui.com/r/<항목>.json 또는 공개 저장소에서 해당 TSX를 직접 가져오는 방식. Integration Settings 레지스트리 표본은 파일 1개, 추가 dependencies 0개를 확인했다. 네이티브 요소·포커스 링·aria-label·aria-live·reduced-motion을 문서화했지만 실제 프로젝트의 키보드와 스크린리더 동작은 적용 후 확인해야 한다.

채팅 입력기·Thinking State·편집 가능한 Data Table, 칸반 Task Board, App Directory, Pricing Plans는 Pro이고, 10-04에 무료였던 Integration Settings·Comments Panel·Setup Guide도 10-06 공개 레지스트리에서 빠졌으므로 미리보기만 보고 무료 소스로 오인하지 말 것. Pro는 로그인/개인 액세스 키로 소스를 받는다. 무료 항목(10-06 기준 27종)만 MIT이며 Pro 소스를 공개 저장소·UI 키트·템플릿·컴포넌트 라이브러리로 배포하거나 Pro 항목으로 인터페이스를 만드는 페이지 빌더·디자인 도구를 만드는 것은 약관에서 금지한다. 완성된 상용·클라이언트 제품에 포함하는 것은 허용된다. 데모의 다른 회사 로고도 라이선스 대상이 아니다.

2026-10-04 확인. 홈은 컴포넌트 17·블록 3·일러스트 9를 표시하고 가격 페이지는 무료 18종을 안내한다. Introduction의 “Pro 5 today”는 현재 전체 Pro 11종과 맞지 않아 홈 표시와 공개 저장소 목록을 기준으로 정리했다. 공개 저장소는 2026-10-03 생성된 신생 프로젝트이므로 파일을 직접 보유하고 필요한 항목만 가져오는 편이 관리하기 쉽다.

근거: https://www.affectui.com/docs · https://www.affectui.com/docs/installation · https://www.affectui.com/docs/accessibility · https://www.affectui.com/pricing · https://www.affectui.com/terms · https://github.com/flohoeller/affectui-components

브라우저에서 소리를 "조작"하는 화면을 만들 때 — 방송·녹음 툴의 마이크 설정 화면, 통화 앱의 입력 레벨 확인, 사운드보드, DAW풍 믹서, 웹 기반 음악 도구의 노브·페이더 패널. 저장된 오디오 관련 항목은 각자 한 조각만 맡는다: waves-cn은 wavesurfer.js로 파형 "표시", Limeplay·Vidstack은 미디어 "재생기", ElevenLabs UI·Pipecat UI는 음성 AI 대화 화면, soundcn·Foley·Cuelume은 효과음 자체. 이건 그 사이의 빈자리인 입력 장치 선택·게인·미터·믹싱을 맡고, UI만이 아니라 Web Audio 그래프를 묶는 훅(useWebAudioMixer는 덕킹·모니터 센드·마스터 리미터까지)까지 준다는 게 다르다.

컴포넌트만 골라 쓸 때는 훅을 함께 봐야 한다. 페이더·노브는 값만 다루는 순수 UI이고, 실제 소리에 연결하는 건 use-gain-node·use-audio-analyser 같은 훅 쪽이다. 처음이면 블록(mic-setup이나 system-audio-mixer)을 하나 설치해 연결 방식을 본 뒤 필요한 조각만 남기는 게 빠르다.

시스템 오디오 캡처(use-system-audio)는 브라우저의 화면 공유 API에 기대므로 브라우저·OS에 따라 안 될 수 있다. 데모 화면의 동작만 보고 모든 환경에서 된다고 가정하지 말 것.

공개된 지 며칠 안 된 신생 레지스트리라 API가 바뀔 수 있다. 다만 shadcn 생태계에서 이미 8bitcn 등을 운영해 온 제작자라 방치 위험은 상대적으로 낮다. 홈 사운드패드의 "Work, work" 음성은 Blizzard 소유로 MIT 대상이 아니지만 레지스트리에는 포함되지 않아 설치 시 따라오지 않는다.

손 제스처 입력을 실험해 보고 싶을 때 — 키오스크·전시용 화면, 요리 중처럼 손을 못 쓰는 상황의 데모, "만지지 않고 넘기는" 프레젠테이션 같은 경우. 저장된 컴포넌트 중 웹캠·손 추적을 다루는 것은 이것뿐이다. MediaPipe를 직접 붙이면 랜드마크 좌표 노이즈 처리와 핀치 판정 임계값을 다 만들어야 하는데, 그 부분이 이미 되어 있다는 게 쓸 이유다.

라이선스가 가장 큰 함정 — npm의 CLI 패키지(@opendevsociety/kine-ui)는 MIT로 표기돼 있지만, CLI가 복사해 주는 컴포넌트 소스가 있는 저장소는 AGPL-3.0이고 README도 "웹 서비스로 배포해도 소스를 같은 라이선스로 공개해야 한다"고 명시한다. 서비스에 넣으면 그 서비스의 소스 공개 의무가 생길 수 있으니 상용 제품에는 넣지 말고 데모·사내 프로토타입용으로만 쓸 것. 상용으로 필요하면 구조만 참고해 MediaPipe 위에 직접 짜는 게 낫다.

사실상 멈춘 프로젝트다. 생성 3일 만에 마지막 커밋(2026-02-24) 후 7개월째 변화가 없고 npm도 2개 버전이 전부다. 버그가 있어도 업스트림 수정은 기대하지 말 것. 모바일은 카메라 각도 때문에 사실상 마우스·터치 폴백으로만 동작한다고 보면 된다.

shadcn 기본 회색 테마에서 벗어나고 싶은데 컴포넌트는 바꾸고 싶지 않을 때. 저장된 skin 항목들(Glass UI, BoldKit, 8bitcn 등)은 컴포넌트 자체를 다른 스타일로 갈아끼우는 것이고, 이건 컴포넌트는 그대로 두고 CSS 변수만 바꾼다. 그래서 이미 shadcn으로 만든 화면에 나중에 적용해도 깨질 일이 거의 없다.

가장 빠른 사용법은 프리셋을 고른 뒤 "레지스트리 명령"으로 내보내 기존 프로젝트에 npx 한 줄로 넣는 것. 직접 만들 때는 색만 고르고 끝내지 말고 내장 대비 검사기를 꼭 돌릴 것. 프리셋이라고 대비가 보장되지는 않는다.

AI 생성·이미지 추출은 무료 5회 제한이라 브랜드 색 하나로 테마를 뽑는 정도면 수동 편집이 더 낫다. 저장소가 Apache-2.0이라 직접 띄워 쓸 수도 있다.

Figma 페이지는 tweakcn 기능이 아니라 Shadcncraft(유료 Figma 키트)에 테마를 적용하는 안내다. 설치하는 컴포넌트가 아니라 브라우저에서 쓰는 생성기라 Backgrounds Supply의 Gradient Lab과 같은 자리로 보면 된다.

shadcn/ui의 생김새와 사용법은 그대로 두고 밑바닥 헤드리스 레이어만 Ark UI로 바꾸고 싶을 때. 저장된 foundation 중 Radix 계열(shadcn 본가 등)과 Base UI 계열(coss ui 55종, basecn, Cubby UI 등)은 있는데 Ark UI 계열은 이게 처음이다. Ark UI는 상태 머신(Zag.js) 기반이라 Date Picker·Color Picker·Tags Input·Signature Pad·Tour처럼 Radix에 없는 복합 위젯이 기본 제공되는 게 갈아탈 이유가 된다.

프레임워크를 착각하지 말 것 — 홈 화면에 React·Solid·Vue·Svelte 로고가 나오지만 이건 Ark UI가 지원하는 범위이고, 이 사이트의 설치 가이드(Next·Vite·Astro·React Router·TanStack Start·Laravel)와 폼 가이드는 전부 React 기준이다. Vue·Svelte용 shadcn 대체를 찾는 거라면 여기가 아니다.

아직 1.0 전이다. 변경 이력이 2026-01 Beta 1 → 03 RC → 05 Post-RC로 이어지고 있어 컴포넌트 API가 바뀔 수 있다. 1인(Vinicius Vicentini) 프로젝트라는 점도 감안할 것. 다만 shadcn처럼 소스가 내 저장소로 복사되는 방식이라 업스트림이 멈춰도 쓰던 코드는 남는다.

차트 블록 70개는 shadcn 차트 예제와 구성이 거의 같다(area·bar·line·pie·radar·radial·tooltip). 차트가 필요해서 고르는 거라면 차별점은 아니다.

Base UI 위에서 shadcn 방식의 컴포넌트를 쓰고 싶을 때, 특히 실제 대형 제품이 쓰는 걸 원할 때. 저장된 Base UI 계열(basecn 61종, Cubby UI 68종, 9ui, Cnippet, Lumi UI)은 대부분 개인 프로젝트인데, 이건 Cal.com이 자사 제품의 공식 디자인 시스템으로 운영하는 것이라 유지 주체가 분명하고 별 10,641개로 규모도 가장 크다. 저장된 Geist(Vercel), Supabase Design System과 같은 "회사가 자기 제품에 쓰는 걸 공개한" 자리다.

라이선스를 반드시 구분해서 볼 것 — 저장소가 혼합 라이선스다. README가 밝히는 규칙은 "apps/ui와 apps/origin은 MIT, 나머지 디렉터리는 전부 AGPLv3"이고, 루트 LICENSE도 AGPL-3.0이다. 레지스트리 항목의 파일 경로(registry/default/ui/button.tsx 등)를 저장소와 대조해 보니 apps/ui/registry/… 와 일치하므로, shadcn CLI로 설치하는 컴포넌트는 MIT다. 반면 같은 저장소의 packages/ui(@coss/ui)는 package.json에 AGPL-3.0-or-later로 적혀 있다. 즉 "shadcn add로 받으면 MIT, 저장소의 패키지를 그대로 가져다 쓰면 AGPL"이라 경로를 잘못 고르면 서비스 전체에 소스 공개 의무가 생길 수 있다. 저장소 루트만 보고 MIT라고 판단하거나, 반대로 AGPL이라 못 쓴다고 판단하는 것 둘 다 틀린다.

사이트의 "510 particles"를 컴포넌트 수로 읽지 말 것. 실제 설치 단위는 55종이고 510개는 각 컴포넌트를 조합한 사용 예제다. 다만 그 예제가 충실해서 컴포넌트 하나의 여러 쓰임새를 바로 복사할 수 있다는 점은 장점이다.

Origin UI를 찾고 있었다면 여기로 오면 된다 — 같은 저장소의 apps/origin에 MIT 그대로 들어와 있다.

Tailwind를 쓰면서 클래스 이름이 길어지는 게 싫을 때, 또는 색 체계를 직접 짜기 전에 쓸 만한 테마가 필요할 때. 접근 방식이 저장된 다른 기반들과 아예 다르다 — Radix·Base UI·React Aria·Headless UI는 동작(키보드·포커스·ARIA)을 주고 스타일을 안 주는 반면, daisyUI는 스타일(클래스와 테마)을 주고 동작을 거의 안 준다. 그래서 둘은 대체재가 아니라 보완재다. 상호작용이 복잡한 화면이면 프리미티브 위에 daisyUI 클래스를 얹는 조합이 가능하다.

같은 "프레임워크 무관" 자리의 저장된 항목과 비교하면 — Basecoat는 shadcn 외형을 JS 없이 재현, HyperUI는 복붙 마크업 540종, daisyUI는 CSS 클래스 체계 자체를 제공한다. 셋 중 유일하게 "플러그인"이라 프로젝트 전체의 스타일 언어가 되고, 그만큼 되돌리기도 어렵다. 반대로 HyperUI는 복사한 마크업만 남으니 잠금이 없다.

테마 35종이 실질적인 값이다. 다크 모드를 포함해 색 토큰이 이미 맞춰져 있어 theme-controller 하나로 바꿀 수 있고, 커스텀 테마도 CSS에서 정의한다. 디자이너 없이 톤을 바꿔 가며 시험하기에 이만한 게 드물다.

컴포넌트 목록에 mockup-browser·mockup-phone·mockup-code·diff처럼 랜딩에서 쓸 조각이 기본으로 들어 있는 것도 기억해 둘 만하다. 보통 별도 라이브러리를 찾아야 하는 것들이다.

규모와 지속성은 이 컬렉션에서 상위권이다 — 별 42,527개, npm 주당 117만 다운로드, 2020년부터 유지되고 마지막 푸시가 2026-09-30이다. MCP 서버와 에이전트 스킬도 공식 제공한다.

주의: 의미 클래스를 쓰는 만큼 HTML만 봐서는 실제 스타일을 알 수 없고, 디자인을 세밀하게 깎으려면 결국 Tailwind 유틸리티로 덮어쓰게 된다. 즉 "클래스가 줄어든다"는 이점은 기본값을 그대로 쓸 때 가장 크다. 사이트가 내세우는 "클래스 88% 감소·HTML 79% 축소"는 자사 비교 예제 기준이니 그대로 받지 말 것. 그리고 사이트 상단에 Carbon 광고와 자사 유료 제품(BLUEPRINT MCP) 배너가 붙는다.

React를 쓰지 않는 스택에서 화면을 빨리 채워야 할 때. 이 라이브러리의 UI Components는 대부분 React 전용인데 이건 순수 Tailwind 마크업이라 Django·Rails·Laravel·Astro·순수 HTML 어디에나 그대로 들어간다. 저장된 Basecoat가 같은 자리인데 둘의 성격이 다르다 — Basecoat는 shadcn/ui의 외형을 프레임워크 없이 재현하는 쪽이고, HyperUI는 디자인 시스템을 표방하지 않고 그냥 조각을 많이 쌓아 둔 쪽이다. 수로는 HyperUI(540종)가 훨씬 많고 라이선스도 MIT로 분명하다(Basecoat는 라이선스 미표기).

카테고리별 두께가 고르지 않으니 기대치를 맞추고 들어갈 것. Application의 Charts 22·Vertical Menu 16·Loaders 14는 골라 쓸 만하지만 Pricing 2종, Testimonials 3종, Skip Links 3종처럼 사실상 한두 개뿐인 칸도 있다. 랜딩 페이지 전체를 여기서 완성하려 하면 가격표와 후기에서 막힌다.

Neobrutalism 묶음(74종)이 따로 있는 점은 기억해 둘 만하다. 저장된 BRUT/UI·Neobrutalism components는 React 레지스트리인데 이건 같은 미감을 마크업으로 주므로, React가 아닌 프로젝트에서 그 톤을 쓸 때 거의 유일한 선택지다.

한계: 마크업만 주기 때문에 드롭다운·모달·탭처럼 상태가 필요한 것은 동작을 직접 붙여야 한다. 사이트가 js.hyperui.dev를 따로 운영하지만 본체와는 별개이고, 접근성(키보드·ARIA)도 스스로 책임져야 한다. 상호작용이 중요한 화면이면 저장된 Headless UI나 Radix 같은 프리미티브 위에 올리는 편이 맞다.

2021년부터 이어져 별 12,252개에 마지막 푸시가 2026-09-26로 꾸준하다. 이 분야에서 드물게 오래 유지된 쪽이다.

Tailwind를 쓰면서 드롭다운·콤보박스·다이얼로그의 키보드와 ARIA를 직접 짜고 싶지 않을 때. 저장된 프리미티브 기반 정리에 이 항목이 빠져 있었는데, 네 번째 축으로 넣어 두면 선택이 정리된다 — Radix(생태계가 가장 큼, shadcn/ui의 토대), React Aria(접근성·국제화가 가장 깊음), Base UI(Radix 팀의 차세대 재설계), Headless UI(Tailwind 생태계 공식, 범위가 가장 좁음). 범위가 좁다는 게 단점만은 아니다 — 16종으로 폼과 오버레이에 집중해 배울 것이 적고, Tailwind Plus·Catalyst가 이 위에 올라가 있어 그 제품들을 쓰면 자연히 따라온다.

다만 지금 새로 고를 때는 유지보수 상태를 먼저 봐야 한다. React 패키지의 마지막 배포가 2026-04-07(v2.2.10)이고 저장소의 마지막 커밋은 2026-04-13인데 그것도 CI 설정 변경이다. 확인 시점(2026-10-03) 기준 약 6개월 멈춰 있고 미해결 이슈가 115개다. 아카이브되지는 않았지만 활발하다고 보기는 어렵다.

Vue 쪽은 더 분명하다. @headlessui/vue는 v1.7.23에서 멈췄고 마지막 배포가 2024-09-09로 2년이 넘었다. React가 v2로 넘어간 뒤 Vue는 v2 버전이 하나도 없고, 사이트의 Vue 링크도 /v1/vue로 간다. Vue 프로젝트라면 이걸 쓰지 말고 저장된 Reka UI(Vue용 스타일 없는 접근성 프리미티브 40종 이상)를 볼 것.

그래서 지금의 쓸모는 둘로 갈린다 — 이미 Headless UI를 쓰는 React 프로젝트라면 MIT에 28,767 stars로 충분히 안정적이고 당장 걷어낼 이유가 없다. 반면 새로 시작하면서 넓은 컴포넌트 범위나 활발한 갱신이 필요하면 Radix나 Base UI 쪽이 맞다.

참고로 React판은 내부에서 React Aria의 focus·interactions 패키지를 쓴다. 즉 저장된 React Aria 계열과 완전히 다른 토대가 아니라 그 일부를 깔고 Tailwind 친화적인 API를 얹은 구조다.

모션이 이미 맞춰진 컴포넌트 세트를 찾을 때, 특히 에이전트에게 UI를 맡길 계획이라면 볼 것. 무료 범위만으로도 세트 구실을 한다 — 104 컴포넌트 + 22 블록이 MIT이고 계정도 필요 없다. 저장된 freemium 레지스트리(SevenUI, easeUI, ai2, Zyeon UI)는 라이선스가 불분명한 경우가 많은데 이쪽은 무료=MIT, Pro=별도 라이선스로 문서에 명확히 갈라 두었다.

에이전트 지원이 이 라이브러리의 축이다. 레지스트리 항목으로 arc-skill을 배포해 SKILL.md 외에 design·motion·accessibility·composition·copy·responsive 규칙 파일과 완성 예제 셋을 한꺼번에 깔고, llms.txt에 "기존 Arc 컴포넌트를 먼저 쓰고 새로 짜지 말 것", "문서에 적힌 prop만 쓸 것", "모든 애니메이션에 reduced-motion 분기를 둘 것", "Pro에 접근 권한이 없으면 Pro 항목을 재구성하지 말고 무료 대안을 제시할 것" 같은 에이전트 규칙을 명시해 둔다. 저장된 iandefined/ui·Sona UI도 에이전트 대응을 내세우지만 규칙 파일을 이 정도로 쪼개 배포하는 경우는 드물다.

값을 하는 또 하나는 arc-foundation이다. 색·표면·라운드·그림자·강조색 토큰과 공통 모션 프리셋을 한 항목으로 묶어 모든 컴포넌트가 공유하므로, 몇 개만 골라 써도 톤이 어긋나지 않는다.

가격은 Pro 연 129달러 또는 일시불 199달러, 팀 10인 일시불 599달러다. 일시불이 있어 연 구독만 있는 곳보다 조건이 낫고, Pro 소스는 개인·상업·클라이언트 작업에 무제한이지만 라이브러리나 템플릿으로 재판매·재배포하는 것은 금지다.

주의 셋. 첫째, 가격 페이지의 "연 2,880달러 절약" 계산기는 디자인 8시간 × 시급 90달러 × 연 4프로젝트를 가정한 판매자 계산이니 그대로 받지 말 것. 둘째, 라이선스 문서 자체가 "변호사 검토 전 초안이며 출시 전 바뀔 수 있다"고 적혀 있다(2026-09-26 기준). Pro를 사기 전에 그 문구가 걷혔는지 확인하는 게 안전하다. 셋째, 저장소가 2026-09-24 개설로 아주 새롭다 — 별 217개로 출발은 좋지만 무료 범위가 유지될지는 지켜볼 일이다.

Lucide를 쓰는 프로젝트에서 아이콘에 호버 모션을 얹고 싶을 때 후보로 볼 수는 있지만, 지금 상태로는 저장된 다른 선택지를 먼저 보는 쪽이 낫다.

설치하면 바로 깨질 가능성이 높다. registry.json의 각 항목은 dependencies로 motion을 선언하는데 실제 컴포넌트 코드는 from "framer-motion"으로 import한다. 네 개를 표본으로 확인했는데 전부 같았다. motion과 framer-motion은 별개 npm 패키지라, CLI가 motion만 설치하고 프로젝트에 framer-motion이 없으면 모듈을 찾지 못한다. 쓰려면 framer-motion을 직접 설치하거나 import 경로를 고쳐야 한다.

라이선스가 없다. 사이트는 "Open Source"를 전면에 내세우지만 저장소에 LICENSE 파일이 없고 README에도 언급이 없다. 그리고 아이콘 형태가 Lucide(ISC)에서 온 것으로 보이는데 출처 표기도 없다. 상업 프로젝트에 넣기 전에 제작자에게 확인이 필요하고, 그게 번거로우면 라이선스가 분명한 쪽을 쓰는 게 맞다.

관리도 멈춰 있다. 2026-02 개설에 마지막 푸시가 2026-03-05로 확인 시점 기준 약 7개월째 변화가 없고 별은 5개다.

아이콘 모션 계열 안에서의 자리: 규모만 보면 AnimateIcons 1,170종 > Anicon 508종 > lucide-animated 467여 종 > Hugeicons Animated 165종 > Grainly 23종 순이지만, 이 셋 중 Hugeicons Animated는 MIT가 분명하고 별 100개로 관리되고 있으며 lucide-animated는 Lucide 이름 체계를 그대로 따르는 실용적 대체재다. 아이콘을 서로 변형시키는 게 목적이면 morphicons(MIT, Lucide·Tabler·Heroicons 등 지원, 런타임 의존성 0)가 접근 자체가 다르다.

그래도 건질 점은 있다 — useReducedMotion이 들어 있어 모션을 끈 사용자를 고려했고, 항목당 파일 하나에 소스를 복사해 소유하는 구조라 필요한 아이콘 한두 개만 꺼내 import만 고쳐 쓰는 용도로는 쓸 만하다. 세트 전체를 채택할 대상은 아니다.

버튼이나 카드에 호버 연출 하나만 얹고 싶을 때. 12종뿐이라 규모로는 저장된 MicroKit UI(48종)나 ericts/ui(42종)에 못 미치지만, 이 모음은 다른 축에서 값을 한다.

효과마다 자기 타이밍을 숫자로 명시한다 — magnetic은 track 120ms·release 420ms, scramble은 arrival 700ms, blur-swap은 lead 150ms·release 640ms 식이다. 모션 라이브러리 대부분이 "부드럽게"로 뭉개는 부분을 값으로 적어 두기 때문에, 이 중 하나를 안 쓰더라도 자기 프로젝트의 호버 타이밍을 정할 때 참고표로 쓸 수 있다.

코드 조건도 깔끔하다. 항목당 파일 하나, 외부 의존성 0(react import만), registryDependencies도 없어서 다른 컴포넌트를 끌고 오지 않는다. 직접 열어 확인한 결과 prefers-reduced-motion 처리와 포인터 종류 감지가 들어 있어, 모션을 끈 사용자와 터치 기기에서 헛돌지 않는다. 저장된 호버 계열 중 Atropos(2KB 3D 패럴랙스)는 바닐라·Vue·Svelte까지 덮는 대신 효과가 하나이고, 이쪽은 React 전용이지만 종류가 열둘이다.

문서가 실무 함정을 먼저 알려 주는 점도 드물다 — magnetic-button은 "포인터 반응 영역이 시각적 경계보다 약 8px 넓으니 다른 상호작용 요소와 그만큼 띄우라"고 적어 둔다. 좁은 툴바에 나란히 놓으면 옆 버튼이 먹히는 문제를 미리 짚은 것이다.

사이트가 스스로 "대시보드가 아니라 랜딩 페이지용"이라고 못 박는데, 그 말이 맞다. 업무 화면에 스크램블이나 마그네틱을 깔면 방해만 되니 히어로·CTA·가격표처럼 보여 주는 자리에만 쓸 것.

주의: GitHub 별 3개에 2026-08 개설로 아주 작은 개인 프로젝트다. 다만 파일 하나를 복사해 소유하는 방식이라 프로젝트가 멈춰도 쓰던 코드는 남는다 — 이 구조에서는 지속성 위험이 거의 없다.

셰이더 배경이나 이미지 필터를 코드로 넣을 때 가장 먼저 볼 것. 저장된 셰이더·배경 계열이 이미 두껍지만 이쪽이 몇 가지 점에서 앞선다 — 별 3,514개로 그 계열에서 가장 검증됐고(UVCanvas·Solaris Sky·Ripple Shader 등은 소규모), Apache-2.0으로 라이선스가 명확하며(계열 상당수가 license-unknown), 코어 패키지의 런타임 의존성이 0이다.

계열 안에서의 자리: bg.ibelick·Aura Gradients는 CSS만 쓰는 최경량, Vanta.js는 WebGL 프리셋, UVCanvas는 배경 7종, Canvas UI는 HTML을 캔버스에 올려 효과를 입히는 방식, glfx.js는 이미지 효과 전용이다. Paper Shaders는 이 중 배경 생성과 이미지 필터를 한 패키지에서 둘 다 다루는 거의 유일한 경우라, 둘이 동시에 필요하면 라이브러리를 하나만 들이면 된다.

쓸 때 판단이 필요한 지점: 30종 중 7종은 이미지를 입력으로 받는 필터라 <img> 대신 캔버스로 그려진다. 접근성과 SEO를 고려해 alt 텍스트와 폴백을 따로 챙겨야 하고, 리스트에 여러 개를 깔면 GPU 부담이 커진다. 정적으로 충분한 자리에는 static-mesh-gradient·static-radial-gradient처럼 애니메이션 없는 버전이 따로 있으니 그쪽을 쓸 것.

prop 문서가 유난히 친절해서 각 값의 범위와 "이 값은 저 값이 0보다 커야 효과가 있다" 같은 의존 관계까지 표로 적어 둔다. 사이트에서 값을 바꿔 가며 확인한 뒤 그대로 옮기면 된다. 같은 회사의 디자인 툴 Paper에서 시각적으로 조정해 내보내는 경로도 있다.

버전이 0.0.81로 아직 0.0.x대다. 활발하지만 API가 굳었다고 보기 어려우니 버전을 고정하고 올릴 때 prop 변경을 확인하는 편이 안전하다.

"이런 작업을 시키는 스킬이 이미 있나"를 훑을 때. 저장된 디렉터리 11종 중 Agent Skill을 다루는 건 이것뿐이고, 저장된 Kage의 Skills 페이지(디자인 스킬 17종 엄선)와는 규모와 성격이 정반대다 — 저쪽은 골라 둔 소수, 이쪽은 긁어모은 전체다.

쓰기 전에 두 가지를 알고 들어가야 한다.

첫째, 라이선스 표기를 믿으면 안 된다. 첫 화면은 "291 licenses verified"라고 자랑하지만 이건 12,856개 중 291개, 즉 2.3%다. product-design 카테고리 193개를 직접 세어 보니 MIT 6개를 빼고 187개가 Unverified였다. 사이트도 FAQ에서 "상업적 사용 전에 원본 저장소의 라이선스를 직접 확인하라"고 밝히고 있으니, 여기 표기는 참고조차 되지 않는다고 보고 저장소를 열 것.

둘째, 정렬이 품질 신호가 아니다. 목록에 붙는 별 수(★229,684, ★214,858 같은 값)는 그 스킬의 인기가 아니라 스킬이 들어 있는 소스 저장소의 스타 수다. 그래서 awesome-list류 초대형 저장소에 묶여 들어간 스킬이 상위를 차지하고, 같은 저장소에서 온 수십 개가 똑같은 별 수를 달고 줄줄이 나온다. 개별 스킬의 완성도와는 무관하다.

그 둘을 감안하면 용도가 분명해진다 — 큐레이션된 추천 목록이 아니라 검색용 색인이다. 키워드로 "이미 누가 만들어 놨나"를 확인하고 원본 저장소로 건너뛰어 직접 판단하는 데 쓴다. 설명이 일본어·중국어로 된 항목도 섞여 있으니 검색어는 영어로 넣는 편이 잘 걸린다.

남이 쓴 SKILL.md는 에이전트에게 그대로 먹이는 지시문이다. 내용을 읽지 않고 설치하면 의도를 모르는 지시를 에이전트 컨텍스트에 넣는 셈이니, 특히 스크립트가 딸린 스킬은 본문과 파일을 확인한 뒤 넣을 것.

아이콘 하나를 Outline과 Duotone 두 결로 번갈아 쓰고 싶을 때, 혹은 스트로크 굵기를 사이트에서 맞춰 보고 그대로 복사하고 싶을 때. 다만 저장된 아이콘 세트들과 견주면 선택 순위가 높지 않으니 먼저 비교하고 들어갈 것 — 고유 287종은 Lucide 1,856종(ISC), Iconoir 1,671종(MIT), Reicon 2,700종에 한참 못 미친다. 스타일 수로 승부하는 것도 애매한데, 이미 저장된 Solar Icons가 6스타일 1,380종을 전부 MIT 무료로 주기 때문이다. 즉 "무료로 여러 스타일"이 목적이면 Solar가 낫고, 이쪽 Pro를 살 이유를 찾기 어렵다.

그래도 볼 만한 구석은 카테고리 배분이다. 19개 분류에 15~16개씩 거의 균등하게 채워 놨고 Weather, Education, Maps & Travel, Finance처럼 범용 세트가 얇게 다루는 영역도 같은 밀도로 들어 있다. 대시보드나 문서 도표처럼 특정 영역만 필요한 경우 빠짐없이 찾아지는 편이다.

가격 구조가 아이콘 세트로는 드물게 구독이다. 좌석당 월 5달러이고 "구독 중에만 사용"이라고 명시돼 있어, 결제를 멈추면 Pro 스타일을 계속 쓸 수 없다는 뜻으로 읽힌다. 프로젝트에 박아 넣는 에셋으로는 부담스러운 조건이니 무료 2스타일 범위 안에서만 쓰는 게 안전하다. 무료분 MIT는 별개로 영구 보장을 명시한다.

주의: 저장소가 2026-09-25에 만들어졌고 별이 1개다. 확인 시점 기준 나온 지 이틀 된 프로젝트라 아이콘 추가·수정 속도와 지속 여부를 판단할 근거가 없다. 프로덕션에 넣기 전에 몇 달 지켜보거나, npm 패키지를 고정 버전으로 물고 가는 편이 낫다.

"이런 느낌의 랜딩을 만들어 줘"를 에이전트에게 시킬 때, 말로 설명하는 대신 실제 화면을 골라 프롬프트로 넘기고 싶을 때. 저장된 DESIGN.md 계열과 층이 다르니 구분해 둔다 — getdesign.md(550곳), Inspo(832곳), Refero Styles(2,000곳+)는 남의 제품에서 색·타이포·여백 토큰을 뽑아 디자인 시스템으로 물리는 쪽이고, Kage는 토큰이 아니라 화면의 구조와 리듬을 섹션 단위로 물린다. 전체 톤을 잡을 거면 저쪽, 히어로 하나 가격표 하나를 특정해서 시킬 거면 이쪽이다. 둘을 같이 써도 충돌하지 않는다.

실무에서 값을 하는 건 필터다. 기술 스택으로 거를 수 있는 게 특히 드물다 — Next.js + Tailwind로 실제 구현된 사이트만 추려 보면 내 스택으로 재현 가능한 것만 남는다. 시각 스타일과 주조색 필터도 있어서 "다크 + 편집형 + Next.js 히어로"처럼 좁혀 들어간다. 컴포넌트마다 복사 수가 공개돼 있어 에이전트들이 실제로 무엇을 집어 가는지도 보인다.

IP 처리가 저장된 UUI보다 낫다. 푸터에 "스크린샷은 각 제품의 것이며 영감과 비평 목적으로 보여 준다"고 명시하고, MCP 문서에도 "프롬프트는 에이전트가 브랜딩이나 카피를 재현하지 않고 구조만 빌리도록 작성했다"고 밝혀 뒀다. UUI는 제품명을 그대로 단 채 코드 복사를 제공해 그대로 옮길 위험이 컸는데, 이쪽은 설계부터 그 선을 긋고 있다. 그래도 최종 책임은 쓰는 쪽이니 문구·로고·색까지 따라가지 않는지는 직접 확인할 것.

OG 이미지가 151장으로 전체 디자인 335개 중 절반 가까이를 차지한다. 랜딩 페이지는 174개이므로 "화면 335개"를 전부 페이지로 기대하면 어긋난다.

덤으로 Skills 페이지에 에이전트용 디자인 스킬 17종이 설치 명령과 설치 수까지 정리돼 있어, 이 분야 스킬을 한 번에 훑기에도 쓸 만하다.