Svelte thinking orbs

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

GitHub

Install for Svelte 5

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

Six 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...

composing

Generating a response or artifact.

Composing...

shaping

Structuring or transforming content.

Shaping...

Tune your Svelte 5 orb

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} />

ThinkingOrb props and states

The complete Svelte 5 API, kept compact.

Props

state
One of six 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.

  • composing

    Generating a response or artifact.

  • shaping

    Structuring or transforming content.