Reasoning Text

Animated status text for showing that an AI agent is thinking and working — ASCII loader plus shimmering phrase cycles.

Cascade

Per-character spring enter/exit — variant="cascade" (default).

Loading…

Installation

CLI

npx @sonojs/ui@latest add reasoning-text

Also needsnpm i motion

Usage

reasoning-text.tsx

import { ReasoningText } from "@/components/sonojs/reasoning-text"

export function Example() {
  return (
    <ReasoningText
      variant="cascade"
      phrases={[
        "Thinking",
        "Reading the context",
        "Connecting the details",
        "Forming a response",
      ]}
    />
  )
}

Props

Prop	Type	Default	Description
phrases	string[]	Thinking / Reading…	Phrases cycled while the agent works.
variant	"cascade" · "swap" · "scramble"	"cascade"	Animation when the active phrase changes.
interval	number	1800	Milliseconds each phrase remains visible.
shimmerDuration	number	2	Seconds for one shimmer pass.
indicator	ReactNode	ascii-line Loader	Optional leading visual instead of the default loader.
className	string	—	Merge classes on the status root.