Thinking Orbs

아홉 가지 상태가 에이전트 UI의 루프를 덮는다. 실행 중인 작업, 생각, 검색이 앞에 오고 이어서 백그라운드 작업, 브라우저 조작, 재시도, 컨텍스트 압축, 사용 한도 대기, 유휴가 붙는다. 대부분 이름 붙은 변형이 있어 gyro는 작업 중인 오브를 흔들고 lighthouse는 검색 빛을 훑는다.

size, speed, density, dotSize, tilt는 모두 숫자 프롭이다. 14px 캡션에도 48px 블록에도 스타일을 쓰지 않고 맞출 수 있다. paused는 현재 프레임에서 움직임을 멈추고, className을 쓰면 기존 유틸리티 클래스의 글자색을 그대로 물려받는다. currentColor로 그리기 때문에 다크 모드에 별도 설정이 필요 없다.

코어에는 모양 하나와 렌더 하나만 들어 있다. 나머지 네 가지 모양(cube, octahedron, tetrahedron, torus)과 일곱 가지 렌더(dashes, squares, crosses, mesh, halftone, lines, verticalLines)는 별도 진입점에 있다. tree shaking이 쓰지 않는 부분을 덜어 내고, 직접 만든 모양은 단위 구 안의 좌표를 돌려주는 함수로 쓴다.

npm에서 설치하거나, shadcn URL로 소스를 복사하거나, mountOrb로 순수 JavaScript에 붙이거나, Xcode에서 Swift 패키지를 추가한다. vanilla 버전은 pause, play, destroy를 돌려주므로 생명주기를 직접 관리하는 페이지에 어울린다. SwiftUI 버전은 전경 스타일로 그려서 foregroundStyle(.blue)를 붙이면 색이 바뀐다.

React 빌드는 React 말고 의존성이 없고, vanilla 빌드는 아예 없다. 기본 20px은 모양을 그릴 때 기준으로 삼은 크기라 빽빽한 화면에서도 점이 읽힌다. label 프롭이 스크린리더용 이름을 붙이고, 운영체제가 동작 줄이기를 알리면 애니메이션이 멈춘다.

소스 전체가 GitHub에 있고 MIT 라이선스가 상업적 사용, 수정, 재배포를 허용한다. 후원은 Patreon으로 받는 선택 사항이며 기능을 여는 조건이 아니다. 컴포넌트를 포크해 직접 관리하려는 팀도 비용을 예측할 수 있다.