1 variant

Thinking Orb

Small dot orbs that say what an agent is doing. Thinking, searching, writing or listening, each with its own motion.

Thinking it through…
Searching the web…
Writing the answer…
Listening…

usage.tsx

import { ThinkingOrb } from "@/components/registry/thinking-orb";

export function Status() {
  return (
    <span className="flex items-center gap-2">
      <ThinkingOrb state="searching" label="" />
      Searching the web…
    </span>
  );
}

"use client";

import { motion, useInView, useReducedMotion } from "motion/react";
import { useRef } from "react";
import { cn } from "@/lib/utils";

export type OrbState = "thinking" | "searching" | "writing" | "listening";

export interface ThinkingOrbProps {
  state?: OrbState;
  /** 20 sits on a line of text; 40 stands alone. Default 20. */
  size?: number;

81 more lines ship with an easeUI Pro license.

Install

$ bunx --bun shadcn add @easeui-pro/thinking-orb