Components AI sparkle

AI sparkle

Koala's AI glyph — the sparkle — animated to show what the AI is doing: a still mark when idle, or in motion while it works, like Joey answering a question or a document being indexed.

<koala-ai>

Canonical

<koala-ai state="Working" />

The sparkle is Koala's AI mark; its motion carries the meaning, on the same damped-spring linear() curve the rest of the system springs on. Colour comes from a text-* class, as with koala-icon.

In a conversation

<div class="shrink-0 w-8 h-8 rounded-full bg-primary text-on-primary flex items-center justify-center">
    <koala-ai state="Working" size="Small" />
</div>
<span class="sr-only">Joey is responding…</span>

The avatar itself carries the state while a reply streams — the sparkle animates inside Joey's circle, with no separate message bubble. Colour comes from the avatar's text-on-primary. Pair an active state with an sr-only label so the wait is announced to screen readers.

Variants

3 states

Idle

state="Idle"

Still — a ready/idle AI affordance.

Thinking

state="Thinking"

Energetic twinkle — actively generating.

Working

state="Working"

Calmer pulse — the AI is working: Joey answering, or a document being indexed.

State — selects the animation. Defaults to Idle. Motion is disabled under prefers-reduced-motion.

Props

4 attributes

Attribute	Values	Notes
state	Idle, Thinking, Working	Selects the animation. Defaults to `Idle`.
size	ExtraSmall, Small, Default, Large, ExtraLarge	Defaults to `Small`.
tooltip	text	Adds a hover/focus tooltip and exposes the sparkle to assistive tech (`role="img"` + `aria-label`). Omit it and the sparkle stays decorative.
class	Tailwind utilities	Colour (`text-*`) and layout, like `koala-icon`.

Do & don't

Do Use it for AI activity, and give an active state an sr-only label so the wait is announced.

Don't Don't use it for ordinary AJAX waits — that's the round koala-spinner's job. The sparkle specifically reads as the AI.