Thinking Orbs

Three staggered dots for agent and AI chat loading states. Lightweight CSS keyframes with a reduced-motion opt-out.

loadingaiagentchat

Agent is thinking…

Usage

Drop the file into your project and import it. There is no package to install.

usage.tsx

import { ThinkingOrbs } from "@/registry/components/thinking-orbs";

export function Example() {
  return <ThinkingOrbs />;
}

Every component here relies only on Tailwind and the cn helper from shadcn/ui.

terminal

npm i clsx tailwind-merge

Shimmer Text

A loading-state text treatment that animates a light sweep through a background-clipped gradient. Useful for streaming AI responses.

Typing Dots

A compact typing indicator pill — the pattern every chat UI needs, without pulling in a full messaging library.