Bar Ring: every bar-ring state in one loader

Nine bar-ring animations in one React component. Bars glide from read to write to seek as your AI agent's state changes. Install with shadcn.

Installation

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

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

Updates live with the parameters you set.

import { BarRing } from "@/components/bar-ring";

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

For the selected animation. Switch it to see the props each one takes.

Prop	Type	Default	Description
animation	"read"\|"comet"\|"twin"\|"write"\|"seek"\|"stream"\|"transfer"\|"ping"\|"plan"	"read"	Which animation runs. Changing it blends from the old animation to the new one; every other prop keeps its value.
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 a full push would grow a bar in px; reading uses about a third of it.
duration	number	0.32	Seconds one bar stays lit as the reading passes.
stagger	number	0.09	Seconds between one bar lighting and the next, going clockwise.
direction	"out"\|"in"	"out"	Which way the push carries a bar: away from the center, or toward it.
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.

Each animation also ships on its own, for a spot that only ever shows one state.