MatterMarkAvatar

Hero example

When to use

Mount MatterMarkAvatar to the left of any streamed assistant turn — the live thinking panel, the final answer, and the post-stream replay. The spinning silhouette is the only piece of chrome that distinguishes "the assistant is working" from "the assistant is idle"; the rest of the panel is type and hairlines.

Anatomy

Two structural pieces:

1. Disc. A 28 px (default) black circle. The --fg token drives the background so the avatar inverts cleanly under the dark theme.
2. Square. A 40 % × 40 % white square at the disc's center. The square animates through a 5-phase 6.4 s loop: dwell (0–12 %), accelerate (12–36 %, +720°), peak (36–60 %, +3 600° — motion blur reads as a continuous circle), decelerate (60–84 %, +720°), settle (84–100 %).

Five phantoms ride alongside the square with phased opacity rises during the fast middle, smearing the silhouette so the peak reads more circular than rotational.

Props

States

The avatar has one continuous animated state — no hover, focus, or pressed variants. The presence is the message.

Themes

Tokens consumed

--fg (avatar disc background), --bg (square + phantoms fall back to this for forced-colors). No new tokens introduced.

Accessibility

• ARIA. role="img" + aria-label="Matter assistant" (override-able).
• Decorative children. Square and phantoms are aria-hidden.
• Reduced motion. Animation halts at the starting square frame.
• Forced colors. Disc and square inherit Canvas + CanvasText.

Recipes

• Assistant turn header. Left of the LiveThinkingPanel while live, persists left of the answer once final, so the avatar + collapsed-header pair anchors the scrollback row.
• Slack-style presence chip. Pair with a name + status string in any compact agent-presence affordance.

Code example

import { LiveThinkingPanel, MatterMarkAvatar } from "@matter/components";

export function AssistantTurn({ steps, elapsedMs }) {
  return (
    <div className="flex items-start gap-3">
      <MatterMarkAvatar />
      <div className="min-w-0 flex-1">
        <LiveThinkingPanel state="live" steps={steps} elapsedMs={elapsedMs} />
      </div>
    </div>
  );
}

Source