OrbCharacter

The assistant's animated identity — an iridescent sphere whose palette derives from the theme accent, with four states covering the AI's lifecycle.

Install it:

npx shadcn add @ambientui/orb-character

Live

still

The four states

still
listening
thinking
answer

Behavior

  • ·still — at rest with its own movement: counter-rotating swirls and a gentle breathe. Present, not demanding.
  • ·listening — digesting what the user said: swirls quiet down and a soft ring repeatedly draws inward.
  • ·thinking — retrieving and reasoning: fast, saturated counter-rotating churn.
  • ·answer — "found it": one bright ring lands with a flash, then the swirls settle into a slow, confident glide. The flash replays on re-entering the state.
  • ·Palette derives from --app-blue (the accent bridge) — the character re-tints with the Foundation accent, zero configuration.
  • ·Rendered by the system's one sanctioned shader surface — the Paper Design heatmap shader wrapped around a circle: thermal energy flowing around the orb's edge, over a frosted-glass wrapper (--ambient-blur).
  • ·Each state moves differently, not just faster: still breathes a balanced rim glow; listening draws the heat inward; thinking runs hot — high contour, grain, racing flow; answer blooms outward once and settles.
  • ·State changes are transitions, never cuts — per-state weights and tempo ease continuously (~0.5s).
  • ·Every state has its own configurable cadence (speed.still/listening/thinking/answer), persisted with the theme.
  • ·Palette is accent-linked by default (a thermal ramp derived from the accent); uncheck accent-linked to set custom colors — they become the heat ramp, cold to hot (up to four, add/remove).
  • ·State is driven through the assistant context (orbState) — the response pipeline sets it, components read it.
  • ·THE PIPELINE OWNS IT WHILE A TURN IS RUNNING. thinking holds until the prose actually starts — not until the answer was composed, because the evidence blocks still have to run — then answer, then still on settle. Ambient input states (listening / still) only apply between turns; typing cannot cancel a thinking state mid-run.

When to use

  • ·As the assistant's face — the floating orb is this character at 52px.
  • ·Anywhere the AI's lifecycle needs to be visible: avatars, processing surfaces.

When not to

  • ·As decoration on pages where no AI is present — the character means the AI is here.
  • ·ONE CHARACTER PER SURFACE, in the row you speak to it: the composer mark, the quick-ask pill, and the resting orb. Not headers, not footers, not navigation. A shell that stamps the character on every bar is signing itself once per component, and the mark stops meaning "the assistant is listening here" and starts meaning "logo".

Based on the Product Design Harness playbook

Distilled from 40,000+ hours of product design for SaaS and enterprise at the bleeding edge of AI

Frontier AI Design & Engineering Lab