Thinking Indicator

AI가 답을 준비하는 동안 보여 주는 "생각 중" 애니메이션입니다.

UI만 제공합니다. AI 호출과 응답 생성은 들어 있지 않습니다. 이 컴포넌트는 "생각 중" 표시만 그려 주며, 언제 보여 주고 숨길지(요청 시작·응답 도착)는 서비스에서 연결해 주세요. 미리보기의 상태 변화는 데모입니다.

AI가 답을 준비하는 동안 보여 주는 "생각 중" 표시입니다. 점으로 이루어진 구슬(Orb), 물결치는 점, 빛이 지나가는 글자 중에서 고를 수 있고, 문구는 "생각하는 중 → 자료를 찾는 중 → 답변을 정리하는 중"처럼 돌아가며 부드럽게 바뀝니다.

Preview

아래 버튼으로 모양, 크기, 구슬의 상태를 바꿔 보세요.

모양

크기

상태

생각하는 중...

tsx

<ThinkingIndicator variant="orb" size="md" orbState="working" />

Variants

생각하는 중...

구슬 orb

점으로 이루어진 구슬이 돌고, 문구 뒤에는 ...만 붙습니다. 가장 AI다운 표시

생각하는 중

점 dots

문구 옆에서 점 세 개가 물결칩니다. 채팅 말풍선처럼 작은 자리에

생각하는 중...

반짝이는 글자 shimmer

글자 위로 빛이 지나갑니다. 아이콘 없이 문구만 쓰고 싶을 때

구슬(orb)에는 물결치는 점이 함께 나오지 않습니다. 구슬이 움직임을 맡고, 문구 뒤에는 정적인 ...만 붙습니다. 물결치는 점은 dots 모양에서만 쓰입니다.

Orb states

구슬은 9가지 상태가 있고, 상태마다 움직임이 다릅니다. AI가 지금 무엇을 하는지에 맞춰 고르세요.

Sizes

size	구슬 크기	이럴 때
`sm`	20px	글줄 안, 버튼 옆처럼 작은 자리
`md`	32px (기본)	채팅 응답 자리
`lg`	64px	빈 화면 가운데, 아바타 크기의 큰 표시

Labels

labels에 문구를 여러 개 주면 정해진 간격(기본 2.6초)으로 돌아가며 바뀌고, 하나만 주면 고정됩니다. 서비스가 하는 일에 맞게 바꾸세요. 문구 뒤의 ...은 자동으로 붙으니 직접 쓰지 않아도 됩니다.

문서를 읽는 중...잠시만요

tsx

<ThinkingIndicator
  labels={["문서를 읽는 중", "근거를 찾는 중", "답변을 작성하는 중"]}
  orbState="searching"
  interval={2000}
/>

<ThinkingIndicator labels={["잠시만요"]} variant="dots" />   // 고정

With the prompt input

응답을 기다리는 동안 대화 영역 끝에 놓고, 답이 오면 지웁니다. AiPromptInput의 pending과 같은 값을 쓰면 됩니다.

tsx

{messages.map((m) => <Bubble key={m.id} message={m} />)}
{isPending && <ThinkingIndicator />}

<AiPromptInput onSubmit={ask} pending={isPending} onStop={stop} />

ThinkingOrb on its own

구슬만 따로 쓸 수도 있습니다. 로딩 자리를 채우거나 AI의 아바타처럼 놓기에 알맞습니다.

tsx

import { ThinkingOrb } from "@/meerkit";

<ThinkingOrb state="searching" size={64} />
<ThinkingOrb state="composing" size={20} speed={1.5} />
<ThinkingOrb state="breathing" size={48} paused />

Motion

구슬은 점 수십~수백 개를 3D 구 위에 고르게 놓고 상태별로 회전·숨쉬기·비틀림·물결·떨림을 줍니다. 앞쪽 점은 크고 진하게, 뒤쪽 점은 작고 흐리게 그려 입체감이 납니다.
점 색은 글자색을 따라가서, 구슬을 놓은 곳의 text-* 클래스로 바꿀 수 있습니다 (예: text-brand).
문구가 바뀔 때는 아래에서 살짝 떠오르며 나타납니다. Meerkit의 다른 움직임과 같은 곡선을 씁니다.
meerkit.config.ts의 motion: false이거나 OS에서 "동작 줄이기"를 켰다면 모든 움직임이 멈추고 멈춘 모양과 문구만 보입니다.
구슬은 canvas 한 장에 그리고 화면에서 사라지면 정리되므로 가볍습니다.

Props