Svelte thinking orbs

Dotted thought-orb indicators for AI and agent UIs, tuned for Svelte 5.

GitHub

Installation

Add the component with your package manager.

pnpm add svelte-thinking-orbs

Use a thinking orb

Import the Svelte 5 canvas component and place it in your interface.

<script lang="ts">
  import { ThinkingOrb } from "svelte-thinking-orbs";
</script>

<ThinkingOrb state="listening" size={48} />

AI and agent UI states

Nine tuned states communicate what an AI assistant or agent is doing.

working

General processing and active work.

Working...

searching

Retrieval, browsing and discovery.

Searching...

solving

Reasoning through a complex problem.

Solving...

listening

Waiting for voice or user input.

Listening...

connecting

Linking tools, agents, and data sources.

Connecting...

weaving

Combining multiple threads into one result.

Weaving...

composing

Generating a response or artifact.

Composing...

breathing

Quietly thinking or waiting between steps.

Breathing...

shaping

Structuring or transforming content.

Shaping...

Playground

Preview each AI UI state, adjust its motion, and copy the component code.

State 
import { ThinkingOrb } from "svelte-thinking-orbs";

<ThinkingOrb state="composing" size={64} speed={1.00} />

Documentation

Reference for ThinkingOrb props, states, and configuration.

Props

state
One of nine thinking states. Defaults to working.
size
A number from 12 to 256 CSS pixels.
theme
auto, dark, or light.
color
CSS ink color that overrides the theme.
speed
Animation speed multiplier. Defaults to 1.
paused
Pauses the current animation until resumed.
static
Draws one frame without joining the animation clock.
class / style
Forwarded directly to the canvas.

States

  • working

    General processing and active work.

  • searching

    Retrieval, browsing and discovery.

  • solving

    Reasoning through a complex problem.

  • listening

    Waiting for voice or user input.

  • connecting

    Linking tools, agents, and data sources.

  • weaving

    Combining multiple threads into one result.

  • composing

    Generating a response or artifact.

  • breathing

    Quietly thinking or waiting between steps.

  • shaping

    Structuring or transforming content.