AI Thinking

Loading and reasoning states for AI responses: shimmering text, bouncing dots, a glowing orb, a collapsible step trace and simulated token streaming.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/ai-thinking

import { AiThinking } from "@/components/ai-thinking"

export function Demo() {
  return (
    <AiThinking
      label="Thinking…"
      text="Motion should explain, not decorate. Start with one clear transition per interaction, keep durations under 400ms, and let springs carry the weight."
    />
  )
}

Updates live as you change the controls. Only non-default props are included.