For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
0
Sponsor

Agent Indicator

PreviousNext

A 3×3 grid badge that shows what an agent is doing while it works — idle, thinking, calling a tool, or streaming — through colour, shape and an opacity wave.

Idle
Thinking
Tool Call
Streaming
"use client";

import { useState } from "react";

Installation

$ pnpm dlx shadcn@latest add https://motif-ui.vercel.app/r/agent-indicator.json

Usage

import { AgentIndicator } from "@/components/agents/agent-indicator";
 
<AgentIndicator state="thinking" />

States

Four states covering the wait, each with its own colour, shape and motion:

StateColourShapeMotion
idleMutedFull gridStatic
thinkingInfo (blue)Full gridDiagonal wave
tool-callForegroundCross ↔ cornersAlternating shapes
streamingSuccess (green)Full gridColumn wave left → right

The wave

The thinking state uses a cosine wave across the anti-diagonal of the grid: nine cells, one sampled curve, the phase offset read off the anti-diagonal each cell sits on. The streaming state runs the same curve along columns instead of diagonals, at a faster tempo.

Every animation is opacity only — nothing here repaints the page on a frame.

Reduced motion

When prefers-reduced-motion is active, animations are skipped and cells display at their resting opacity — the frozen first frame of the wave. The four states are still visually distinct by colour and shape alone.