A small animated glyph that shows what an AI agent is currently doing (thinking, searching, writing, planning, waiting), rendered bare or wrapped in a status pill with a label.
import Orb from "@/components/ui/orb";
import { useEffect, useState } from "react";
const stages = [
{ variant: "orbit", label: "Searching Intercom" },
{ variant: "pulse", label: "Checking the Stripe invoice" },
{ variant: "globe", label: "Planning the refund" },
{ variant: "sweep", label: "Drafting a reply to Acme" },
];
export default function OrbFollowingRunDemo() {
const [index, setIndex] = useState(0);
useEffect(() => {
const timer = setInterval(
() => setIndex((i) => (i + 1) % stages.length),
2200,
);
return () => clearInterval(timer);
}, []);
return (
<div className="flex h-[200px] w-full items-center justify-center">
<Orb pill variant={stages[index].variant} label={stages[index].label} />
</div>
);
}
