Arc Tasks: a loader for parallel tool calls

Each ring turns at its own pace; finished rings close and stop. A React loader for tool calls and subagents running in parallel.

Installation

Install with the shadcn CLI, or copy the component file. It only needs React.

npx shadcn@latest add https://oxyn.space/r/arc-tasks.json

Updates live with the parameters you set.

import { ArcTasks } from "@/components/arc-tasks";

export function Thinking() {
  return (
    <ArcTasks />
  );
}

Prop	Type	Default	Description
lines	number	3	Number of concentric rings.
cuts	number	3	Cuts in each ring. The ring is split into this many equal arcs.
cutSpacing	number	30	Angular width of each cut in degrees. 0 closes the rings.
lineSpacing	number	8	Gap between neighboring rings in px.
lineWidth	number	1.5	Stroke width of each ring in px.
speed	number	0.3	Pace of the animation, in turns per second of the outer ring at a steady spin.
alternate	boolean	true	Turn neighboring rings in opposite directions.
size	number	160	Width and height of the orb in px.
minOpacity	number	0.4	Opacity of the innermost ring. The outer ring is always fully opaque.
color	string	"#e4e4e7"	Line color.
paused	boolean	false	Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed.
active	number	6	Calls still running, counting inward from the outer ring; the rings inside them close, dim and stop. Leave the prop out in code for all running.
label	string	"Thinking"	Accessible name; the wrapper is role="status".
className / style	—	—	Spread onto the wrapper div, along with any other div props.

Arc Tasks is one of the animations in Arc Rings. Use the group when the agent's state changes, and it morphs between them.