AI 에이전트용 로딩 컴포넌트 'thinking-orbs' 공개

AI 에이전트의 긴 대기 시간 동안 사용자가 현재 어떤 작업을 수행 중인지 직관적으로 알 수 있게 돕는 thinking-orbs React 컴포넌트입니다.

핵심 기능 및 설계

• 9가지 작업 상태 시각화: searching, solving, listening, connecting 등 에이전트의 동작 단계에 맞춘 9가지 고유 애니메이션을 제공하여, 단순한 로딩을 넘어 작업의 종류를 전달합니다.
• 최적화된 렌더링: WebGL이나 SVG 필터 대신 2D 캔버스만을 사용하여 브라우저 호환성을 높이고 저사양 기기에서도 가볍게 동작합니다.
• UX 및 접근성 강화: Tailwind/shadcn 스타일의 테마 자동 감지, aria-label을 통한 접근성 지원, 그리고 prefers-reduced-motion 환경을 위한 정지 프레임 기능을 포함합니다.
• 성능 관리: IntersectionObserver를 통해 화면 밖의 인스턴스를 자동 정지하며, 다중 인스턴스 사용 시에도 시계(clock)를 공유하여 일관된 움직임을 유지합니다.

대상 및 확장성 에이전트 기반 챗 인터페이스를 구축하는 React 개발자에게 유용하며, Skia 기반의 React Native 포트도 제공되어 모바일 환경에서도 활용 가능합니다.