Bar Plan: a loader for working a plan

A ring of bars cut into steps: done steps hold, the current one sweeps. A React loader for an AI agent working through a plan.

Installation

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

npx shadcn@latest add https://oxyn.space/r/bar-plan.json

Updates live with the parameters you set.

import { BarPlan } from "@/components/bar-plan";

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

Prop	Type	Default	Description
bars	number	36	Number of bars around the ring.
barHeight	number	12	Resting height of each bar in px, pointing away from the center.
barWidth	number	2	Thickness of each bar in px. Capped so neighbors never overlap.
radius	number	1	Corner radius of each bar in px.
extend	number	10	How far the sweep grows a bar in px. Done steps hold at about 40% of it.
duration	number	0.24	Seconds one bar takes to grow and settle as the sweep passes.
stagger	number	0.06	Seconds between one bar and the next as the sweep runs through the current step.
direction	"out"\|"in"	"out"	Which way the push carries a bar: away from the center, or toward it.
steps	number	4	Steps in the plan, each an equal segment of the ring.
current	number	1	The step running now, counting from 0. Earlier steps show as done; set it to the step count when all are done.
size	number	160	Width and height of the orb in px.
minOpacity	number	0.35	Opacity of resting bars. Bars at the peak of the wave are always fully opaque.
color	string	"#e4e4e7"	Bar color.
paused	boolean	false	Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed.
label	string	"Thinking"	Accessible name; the wrapper is role="status".
className / style	—	—	Spread onto the wrapper div, along with any other div props.

Bar Plan is one of the animations in Bar Ring. Use the group when the agent's state changes, and it morphs between them.