thinking-orbs

# thinking-orbs AI 및 에이전트 UI용 점선 생각 구체 로딩 인디케이터. 9가지 수작업으로 조정된 애니메이션 상태를 제공하며, 각 상태는 두 가지 목적에 맞는 크기로 제공됩니다. 일반 2D 캔버스에서 렌더링되며 WebGL이나 필터를 사용하지 않아 Chrome, Safari, Firefox에서 동일하게 작동합니다. [라이브 데모](https://orbs.jakubantalik.com) · [저장소](https://github.com/Jakubantalik/thinking-orbs) · [이슈 보고](https://github.com/Jakubantalik/thinking-orbs/issues) ## 설치 ```bash npm install thinking-orbs ``` ## 빠른 시작 ```tsx import { ThinkingOrb } from 'thinking-orbs'; function Status() { return <ThinkingOrb state="searching" size={64} />; } ``` ## 상태 에이전트가 수행할 수 있는 9가지 동작으로, 각각 고유한 애니메이션을 가집니다: ```tsx <ThinkingOrb state="working" /> {/* 기울어진 궤도의 입자 */} <ThinkingOrb state="searching" /> {/* 스캔 자오선이 점선 구체를 훑음 */} <ThinkingOrb state="solving" /> {/* 밴드가 뒤섞인 후 다시 맞춰짐 */} <ThinkingOrb state="listening" /> {/* 파형이 링을 통과 */} <ThinkingOrb state="connecting" /> {/* 별자리가 스스로 연결됨 */} <ThinkingOrb state="weaving" /> {/* 세 가닥이 구체 주위로 엮임 */} <ThinkingOrb state="composing" /> {/* 물결치는 다중 밴드 새시 */} <ThinkingOrb state="breathing" /> {/* 천천히 변형되는 링 */} <ThinkingOrb state="shaping" /> {/* 점선 윤곽: 원 → 삼각형 → 사각형 */} ``` ## 크기 두 가지 조정된 프리셋이 있으며, 단순한 배율이 아닌 별도의 디자인입니다. `64`는 채팅 아바타 크기, `20`은 인라인 텍스트 크기입니다. 각각 고유한 점 개수, 점 크기 및 속도 조정이 포함됩니다: ```tsx <ThinkingOrb state="working" size={64} /> <ThinkingOrb state="working" size={20} /> ``` ## 테마 엄격한 모노크롬 — 어두운 배경에는 밝은 잉크, 밝은 배경에는 어두운 잉크 — 호스트 프로젝트에서 자동으로 모드를 선택합니다: ```tsx <ThinkingOrb theme="auto" /> {/* 기본값 — 프로젝트에서 감지 */} <ThinkingOrb theme="dark" /> {/* 고정: 어두운 배경용 밝은 점 */} <ThinkingOrb theme="light" /> {/* 고정: 밝은 배경용 어두운 점 */} ``` `auto`는 세 계층으로 해석되며, 그중 하나라도 변경되면 실시간으로 업데이트됩니다: 1. 조상 요소의 `data-theme="dark|light"` 속성 또는 `dark`/`light` 클래스 (Tailwind / shadcn 규칙), `MutationObserver`로 감시; 2. 그렇지 않으면 `prefers-color-scheme`, 실시간 OS 테마 변경을 구독; 3. SSR 안전 — 캔버스는 테마가 결정된 후 클라이언트에서만 그립니다. ## 기타 속성 ```tsx <ThinkingOrb state="solving" size={20} speed={1.5} // 프리셋의 기본 속도에 대한 배수 paused={false} // 현재 프레임에서 정지 aria-label="저장소 분석 중…" // 상태별 기본값 재정의 /> ``` 다른 모든 `<canvas>` 속성 (`className`, `style`, `data-*`, …)은 그대로 전달됩니다. ## 접근성 및 성능 - 기본 제공되는 상태별 적절한 `aria-label`과 함께 `role="img"`. - `prefers-reduced-motion: reduce`는 정적 대표 프레임을 렌더링하며 애니메이션 없이도 라이브 테마를 따릅니다. - 모든 인스턴스는 화면 밖으로 스크롤되거나 (`IntersectionObserver`) 탭이 숨겨지면 자동으로 일시 중지되고 위상이 유지된 상태로 재개됩니다 — 모든 인스턴스가 하나의 클록을 공유합니다. - 일반 2D 캔버스 호 전용: `ctx.filter`, SVG 필터, WebGL 없음 — 모든 곳에서 동일한 픽셀, 저사양 기기에서도 가벼움. 기기 픽셀 비율은 2로 제한됩니다. ## 라이선스 MIT © Jakub Antalik