Orb

Component 1

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Orb to your project and fits it to your theme.

Code

How Orb is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}