Thinking Orb

Component 11

About

An animated canvas-based particle orb loader with 9 procedural states (working, searching, solving, listening, connecting, weaving, composing, breathing, shaping) for showing an AI assistant's cognitive activity.

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

Code

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

Usage.tsx

"use client";

import * as React from "react";
import { OrbSolving } from "@/components/ui/thinking-orb";
import type { ThinkingOrbSurface } from "@/components/ui/thinking-orb";

export interface DemoProps {
  surface?: ThinkingOrbSurface;
  size?: number;
  speed?: number;
  scale?: number;
  playback?: "play" | "pause";
}

export default function Demo({
  surface = "auto",
  size = 240,
  speed = 1,
  scale = 0.72,
  playback = "play",
}: DemoProps) {
  return (
    <div className="flex size-full min-h-[300px] flex-col items-center justify-center p-6">
      <OrbSolving
        surface={surface}
        size={size}
        speed={speed}
        scale={scale}
        playback={playback}
      />
    </div>
  );
}