ThinkingIndicator
A write-on / bloom text animation for AI thinking states and hero surfaces. Cycles a phrase pool with per-character stagger, a leading orbiting brand mark (xs InfinityAnim), and a trailing ellipsis. Supports an optional intro sequence that plays once before the rotating pool starts cycling.
Installation
# Install @opencosmos/ui to use ThinkingIndicator
pnpm add @opencosmos/uiPreview
Loading preview...
Customize
— Which built-in phrase pool to cycle through
— Visual size
— Milliseconds per phrase before transitioning
— Shuffle the rotating pool on mount (intro is never shuffled)
— Show the leading brand mark (xs InfinityAnim)
— Show the trailing ellipsis (blooms in with the text)
Usage
Import
import { ThinkingIndicator } from '@opencosmos/ui';Example
<ThinkingIndicator>
Content
</ThinkingIndicator>Eject
Copy this component into your project for full customization
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| pool | landing | chat | "chat" | Which built-in phrase pool to cycle through |
| size | sm | md | lg | "md" | Visual size |
| cycleMs | text | "2800" | Milliseconds per phrase before transitioning |
| shuffle | boolean | false | Shuffle the rotating pool on mount (intro is never shuffled) |
| mark | boolean | true | Show the leading brand mark (xs InfinityAnim) |
| showEllipsis | boolean | true | Show the trailing ellipsis (blooms in with the text) |
Accessibility
- role="status" with aria-live="polite" announces phrase changes to screen readers
- Visible label override via the `label` prop
- All animation gated by useMotionPreference — at intensity 0 phrases swap with no motion
- Sparkle is aria-hidden; ellipsis is decorative
Examples
Chat (default)
Thinking
Landing
Thinking
Small
Thinking
No mark
Thinking
Code Examples
Cosmo chat thinking state
Drop into any chat surface while waiting for an AI response.
import { ThinkingIndicator } from '@opencosmos/ui';
<ThinkingIndicator pool="chat" />Landing-page hero
Larger size with a slower cycle for hero copy that writes itself in.
import { ThinkingIndicator } from '@opencosmos/ui';
<ThinkingIndicator pool="landing" size="lg" cycleMs={3500} />Custom phrase pool
Provide your own phrases to override the built-in pools.
import { ThinkingIndicator } from '@opencosmos/ui';
<ThinkingIndicator
phrases={['Searching the index', 'Ranking results', 'Almost there']}
cycleMs={2200}
/>