# oxyn: full reference

oxyn is a set of 62 animated React loaders (56 single states and 6 group components), each drawn on a canvas and shipped as one self-contained file installed with the shadcn CLI. Instead of one spinner for every wait, each loader stands for one AI agent state: reading a file, editing, searching, calling a tool, uploading, waiting on approval.

- React only. Each file imports only from `react` and starts with "use client".
- Accessible: renders role="status" with a `label` prop, and holds still under prefers-reduced-motion.
- Each row also ships as one group component whose `animation` prop morphs between the row's states.
- MIT licensed. Not for determinate progress bars, skeletons, or Vue/Svelte/HTML.

## Dot Orb

A sphere of dots spinning on its vertical axis. Dots on the far side stay visible but shrink and fade, so a flat canvas reads as 3D.

- Use for: Thinking
- Page: https://oxyn.space/components/dot-orb
- Install: `npx shadcn@latest add https://oxyn.space/r/dot-orb.json`

```tsx
import { DotOrb } from "@/components/dot-orb";

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

| Prop | Default | Description |
| --- | --- | --- |
| `pattern` | "rings" | How the dots are laid out on the sphere. |
| `dotSize` | 3 | Diameter of the front dots in px. Back dots scale down automatically. |
| `density` | 12 | Rows of dots. Higher means more dots. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 3 | Seconds for one full 360° turn. |
| `gap` | 0 | Seconds to rest between turns. 0 spins continuously; above 0 each turn eases in and out. |
| `direction` | "left" | Spin direction around the vertical axis. |
| `tilt` | 18 | Lean toward the viewer in degrees, so the top shows. |
| `backOpacity` | 0.2 | Opacity of the furthest dots. Front dots are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Dot Cascade

The orb holds still while each row of dots takes a full 360° turn, one after another from top to bottom, so a staggered wave rolls down the sphere.

- Use for: Thinking
- Page: https://oxyn.space/components/dot-cascade
- Install: `npx shadcn@latest add https://oxyn.space/r/dot-cascade.json`

```tsx
import { DotCascade } from "@/components/dot-cascade";

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

| Prop | Default | Description |
| --- | --- | --- |
| `pattern` | "rings" | How the dots are laid out on the sphere. |
| `dotSize` | 3 | Diameter of the front dots in px. Back dots scale down automatically. |
| `density` | 12 | Rows of dots. Higher means more dots. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 1.4 | Seconds each row takes to complete its 360° turn. |
| `stagger` | 0.08 | Seconds between one row starting and the row below it. |
| `gap` | 0.6 | Seconds the orb rests after the bottom row finishes, before the next wave. |
| `direction` | "left" | Spin direction around the vertical axis. |
| `tilt` | 18 | Lean toward the viewer in degrees, so the top shows. |
| `backOpacity` | 0.2 | Opacity of the furthest dots. Front dots are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Dot Lift

The orb holds still while each ring of dots pushes straight outward and settles back into place, one after another from top to bottom. Dots never rotate or change height; on the spiral the wave becomes a diagonal stripe that follows the spiral arms down the sphere.

- Use for: Processing
- Page: https://oxyn.space/components/dot-lift
- Install: `npx shadcn@latest add https://oxyn.space/r/dot-lift.json`

```tsx
import { DotLift } from "@/components/dot-lift";

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

| Prop | Default | Description |
| --- | --- | --- |
| `pattern` | "rings" | How the dots are laid out on the sphere. |
| `dotSize` | 3 | Diameter of the front dots in px. Back dots scale down automatically. |
| `density` | 12 | Rows of dots. Higher means more dots. |
| `size` | 160 | Width and height of the orb in px. |
| `lift` | 0.16 | How far each ring pushes outward before settling back, as a fraction of the orb's radius. |
| `duration` | 0.5 | Seconds each ring takes to push out and settle back into place. |
| `stagger` | 0.14 | Seconds between one ring starting and the next one along. |
| `gap` | 0.5 | Seconds the orb rests after the last ring settles, before the next wave. |
| `from` | "top" | Which end of the orb the wave starts from. |
| `tilt` | 18 | Lean toward the viewer in degrees, so the top shows. |
| `backOpacity` | 0.2 | Opacity of the furthest dots. Front dots are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Dot Tide

A narrow wave travels down the orb, pulling a few rows of dots inward toward its axis and letting them back out behind it. Dots never rotate or change height; on the spiral the wave becomes a diagonal stripe that follows the spiral arms down the sphere.

- Use for: Working on a task
- Page: https://oxyn.space/components/dot-tide
- Install: `npx shadcn@latest add https://oxyn.space/r/dot-tide.json`

```tsx
import { DotTide } from "@/components/dot-tide";

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

| Prop | Default | Description |
| --- | --- | --- |
| `pattern` | "rings" | How the dots are laid out on the sphere. |
| `dotSize` | 3 | Diameter of the front dots in px. Back dots scale down automatically. |
| `density` | 12 | Rows of dots. Higher means more dots. |
| `size` | 160 | Width and height of the orb in px. |
| `depth` | 0.2 | How far the wave pulls the dots in toward the vertical axis, as a fraction of the orb's radius. |
| `width` | 3.5 | How many rows the wave pulls in at once. |
| `duration` | 1.6 | Seconds for the wave to travel from one pole to the other. |
| `gap` | 0.4 | Seconds the orb rests after the wave leaves, before the next one. |
| `from` | "top" | Which end of the orb the wave starts from. |
| `tilt` | 18 | Lean toward the viewer in degrees, so the top shows. |
| `backOpacity` | 0.2 | Opacity of the furthest dots. Front dots are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Dot Twist

The orb is cut into thirds like a 3×3 cube. Rows turn a quarter about the vertical axis and columns flip over the top; after a few turns the same turns play back in reverse and the orb solves itself. Every turn lands the dots back on the pattern: rings turn by a whole number of their own dot spacings, and the spiral, which no row turn short of a full one fits, spins its rows all the way round while its columns flip about the spiral’s own axis of symmetry.

- Use for: Reasoning through a problem
- Page: https://oxyn.space/components/dot-twist
- Install: `npx shadcn@latest add https://oxyn.space/r/dot-twist.json`

```tsx
import { DotTwist } from "@/components/dot-twist";

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

| Prop | Default | Description |
| --- | --- | --- |
| `pattern` | "grid" | How the dots are laid out on the sphere. |
| `dotSize` | 3 | Diameter of the front dots in px. Back dots scale down automatically. |
| `density` | 12 | Rows of dots. Higher means more dots. |
| `size` | 160 | Width and height of the orb in px. |
| `moves` | 4 | Turns in each scramble. The same turns then play back in reverse to solve the orb. |
| `duration` | 0.5 | Seconds for one turn. |
| `gap` | 0.4 | Seconds the orb holds once scrambled, and again once solved. |
| `tilt` | 18 | Lean toward the viewer in degrees, so the top shows. |
| `backOpacity` | 0.2 | Opacity of the furthest dots. Front dots are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Dot Scan

A thin band, a row or two deep, travels down the orb at a steady pace, brightening and swelling the dots it passes like the line being read, then rests and starts again at the top. Nothing moves; on the spiral the band becomes a diagonal stripe that follows the spiral arms down the sphere.

- Use for: Reading a file
- Page: https://oxyn.space/components/dot-scan
- Install: `npx shadcn@latest add https://oxyn.space/r/dot-scan.json`

```tsx
import { DotScan } from "@/components/dot-scan";

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

| Prop | Default | Description |
| --- | --- | --- |
| `pattern` | "rings" | How the dots are laid out on the sphere. |
| `dotSize` | 3 | Diameter of the front dots in px. Back dots scale down automatically. |
| `density` | 12 | Rows of dots. Higher means more dots. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 2 | Seconds for the band to read from the top pole to the bottom one. |
| `gap` | 0.4 | Seconds the orb rests after the band leaves, before the next read. |
| `tilt` | 18 | Lean toward the viewer in degrees, so the top shows. |
| `backOpacity` | 0.2 | Opacity of the furthest dots. Front dots are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Dot Rise

Up: a wave travels from the bottom pole to the top, pushing a few rows outward and dimming them as it passes the top, so the orb reads as sending. Down: the wave travels from the top, pulling rows inward as it comes in. Dots never rotate or change height; on the spiral the wave becomes a diagonal stripe that follows the spiral arms.

- Use for: Uploading or downloading
- Page: https://oxyn.space/components/dot-rise
- Install: `npx shadcn@latest add https://oxyn.space/r/dot-rise.json`

```tsx
import { DotRise } from "@/components/dot-rise";

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

| Prop | Default | Description |
| --- | --- | --- |
| `pattern` | "rings" | How the dots are laid out on the sphere. |
| `dotSize` | 3 | Diameter of the front dots in px. Back dots scale down automatically. |
| `density` | 12 | Rows of dots. Higher means more dots. |
| `size` | 160 | Width and height of the orb in px. |
| `direction` | "up" | Up for an upload: the wave pushes outward on its way up. Down for a download: it pulls inward on its way down. |
| `lift` | 0.16 | Up: how far the wave pushes the dots outward, as a fraction of the orb's radius. |
| `depth` | 0.2 | Down: how far the wave pulls the dots in toward the vertical axis, as a fraction of the orb's radius. |
| `width` | 3.5 | How many rows the wave moves at once. |
| `duration` | 1.4 | Seconds for the wave to travel from one pole to the other. |
| `gap` | 0.4 | Seconds the orb rests after the wave leaves, before the next one. |
| `tilt` | 18 | Lean toward the viewer in degrees, so the top shows. |
| `backOpacity` | 0.2 | Opacity of the furthest dots. Front dots are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Dot Sweep

One meridian of dots lights up and sweeps around the vertical axis like a radar, a short trail fading behind it. Dots never move; only their brightness and size change. On the grid the sweep lights one column at a time, on the rings it follows the angle around the axis, and on the spiral it follows an arm.

- Use for: Searching
- Page: https://oxyn.space/components/dot-sweep
- Install: `npx shadcn@latest add https://oxyn.space/r/dot-sweep.json`

```tsx
import { DotSweep } from "@/components/dot-sweep";

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

| Prop | Default | Description |
| --- | --- | --- |
| `pattern` | "rings" | How the dots are laid out on the sphere. |
| `dotSize` | 3 | Diameter of the front dots in px. Back dots scale down automatically. |
| `density` | 12 | Rows of dots. Higher means more dots. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 2.4 | Seconds for the sweep to go once around the orb. |
| `direction` | "left" | Which way the sweep turns around the vertical axis. |
| `tilt` | 18 | Lean toward the viewer in degrees, so the top shows. |
| `backOpacity` | 0.2 | Opacity of the furthest dots. Front dots are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Dot Compact

Two narrow waves set off from the poles, pulling rows inward as they travel, and meet at the equator. The orb holds there briefly with a thin waist, then lets go. Dots never rotate or change height; on the spiral the waves become diagonal stripes that follow the spiral arms.

- Use for: Compacting or summarizing context
- Page: https://oxyn.space/components/dot-compact
- Install: `npx shadcn@latest add https://oxyn.space/r/dot-compact.json`

```tsx
import { DotCompact } from "@/components/dot-compact";

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

| Prop | Default | Description |
| --- | --- | --- |
| `pattern` | "rings" | How the dots are laid out on the sphere. |
| `dotSize` | 3 | Diameter of the front dots in px. Back dots scale down automatically. |
| `density` | 12 | Rows of dots. Higher means more dots. |
| `size` | 160 | Width and height of the orb in px. |
| `depth` | 0.2 | How far the waves pull the dots in toward the vertical axis, as a fraction of the orb's radius. |
| `duration` | 1.8 | Seconds for one squeeze: the waves meeting at the equator, the waist holding, and letting go. |
| `gap` | 0.4 | Seconds the orb rests after the waist lets go, before the next squeeze. |
| `tilt` | 18 | Lean toward the viewer in degrees, so the top shows. |
| `backOpacity` | 0.2 | Opacity of the furthest dots. Front dots are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Dot Swarm

Up to four narrow waves travel down the orb at once, evenly spaced, like that many tides running side by side. Waves take turns pulling their rows inward and pushing them outward, so neighbors read apart. Dots never rotate or change height; on the spiral each wave becomes a diagonal stripe that follows the spiral arms.

- Use for: Parallel tool calls and subagents
- Page: https://oxyn.space/components/dot-swarm
- Install: `npx shadcn@latest add https://oxyn.space/r/dot-swarm.json`

```tsx
import { DotSwarm } from "@/components/dot-swarm";

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

| Prop | Default | Description |
| --- | --- | --- |
| `pattern` | "rings" | How the dots are laid out on the sphere. |
| `dotSize` | 3 | Diameter of the front dots in px. Back dots scale down automatically. |
| `density` | 12 | Rows of dots. Higher means more dots. |
| `size` | 160 | Width and height of the orb in px. |
| `waves` | 2 | Waves travelling down the orb at once: one per call running in parallel. |
| `lift` | 0.16 | How far every other wave pushes the dots outward, as a fraction of the orb's radius. |
| `depth` | 0.2 | How far the remaining waves pull the dots in toward the vertical axis, as a fraction of the orb's radius. |
| `duration` | 2 | Seconds for each wave to travel from the top pole to the bottom one. |
| `tilt` | 18 | Lean toward the viewer in degrees, so the top shows. |
| `backOpacity` | 0.2 | Opacity of the furthest dots. Front dots are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Square Pulse

A flat square of dots where a square ring of swollen dots spreads from the center to the edge.

- Use for: Thinking
- Page: https://oxyn.space/components/square-pulse
- Install: `npx shadcn@latest add https://oxyn.space/r/square-pulse.json`

```tsx
import { SquarePulse } from "@/components/square-pulse";

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

| Prop | Default | Description |
| --- | --- | --- |
| `dotShape` | "round" | Shape of each dot. |
| `dotSize` | 2.5 | Resting dot size in px. |
| `scale` | 1.5 | How many times larger a dot grows at the peak of the animation. |
| `density` | 11 | Dots across the width of the sheet. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 1.6 | Seconds for one ring to travel across the sheet. |
| `gap` | 0.3 | Seconds to rest between rings. |
| `ringWidth` | 0.35 | Thickness of the ring of large dots, as a fraction of the sheet radius. |
| `direction` | "out" | "out" spreads from the center to the edge; "in" closes from the edge to the center. |
| `minOpacity` | 0.25 | Opacity of resting dots. Dots at full size are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Square Breath

A flat square of dots that grows and shrinks together, one slow inhale and exhale per loop. Add ripple and the center breathes a beat before the edge.

- Use for: Idle or waiting
- Page: https://oxyn.space/components/square-breath
- Install: `npx shadcn@latest add https://oxyn.space/r/square-breath.json`

```tsx
import { SquareBreath } from "@/components/square-breath";

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

| Prop | Default | Description |
| --- | --- | --- |
| `dotShape` | "round" | Shape of each dot. |
| `dotSize` | 2.5 | Resting dot size in px. |
| `scale` | 1.5 | How many times larger a dot grows at the peak of the animation. |
| `density` | 11 | Dots across the width of the sheet. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 2.4 | Seconds for one full breath (grow, then shrink). |
| `gap` | 0.2 | Seconds to rest between breaths. |
| `ripple` | 0 | Seconds the edge lags behind the center. 0 breathes in sync. |
| `minOpacity` | 0.25 | Opacity of resting dots. Dots at full size are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Square Wave

A flat square of dots that breathes in a sweep from left to right, each column swelling a beat after the one before it.

- Use for: Processing
- Page: https://oxyn.space/components/square-wave
- Install: `npx shadcn@latest add https://oxyn.space/r/square-wave.json`

```tsx
import { SquareWave } from "@/components/square-wave";

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

| Prop | Default | Description |
| --- | --- | --- |
| `dotShape` | "round" | Shape of each dot. |
| `dotSize` | 2.5 | Resting dot size in px. |
| `scale` | 1.5 | How many times larger a dot grows at the peak of the animation. |
| `density` | 11 | Dots across the width of the sheet. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 1.2 | Seconds for one dot's full breath (grow, then shrink). |
| `gap` | 0.3 | Seconds to rest between waves. |
| `spread` | 0.9 | Seconds the far side lags behind the near side. Higher values make a slower, narrower wave. |
| `direction` | "right" | "right" sweeps from left to right; "left" sweeps from right to left. |
| `minOpacity` | 0.25 | Opacity of resting dots. Dots at full size are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Square Fill

A flat square of dots where a ring spreads from the center and leaves every dot it passes swollen. Once the whole square is full, a second ring follows and shrinks them back to rest.

- Use for: Loading
- Page: https://oxyn.space/components/square-fill
- Install: `npx shadcn@latest add https://oxyn.space/r/square-fill.json`

```tsx
import { SquareFill } from "@/components/square-fill";

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

| Prop | Default | Description |
| --- | --- | --- |
| `dotShape` | "round" | Shape of each dot. |
| `dotSize` | 2.5 | Resting dot size in px. |
| `scale` | 1.5 | How many times larger a dot grows at the peak of the animation. |
| `density` | 11 | Dots across the width of the sheet. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 1.2 | Seconds for the ring to cross the sheet once. It crosses twice per loop: once to fill, once to empty. |
| `gap` | 0.3 | Seconds to rest between loops. |
| `ringWidth` | 0.35 | Thickness of the ring where dots are growing or shrinking, as a fraction of the sheet radius. |
| `direction` | "out" | "out" fills and empties from the center to the edge; "in" from the edge to the center. |
| `minOpacity` | 0.25 | Opacity of resting dots. Dots at full size are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Square Read

A flat square of dots where a read head runs along each row in turn, left to right and top to bottom, like eyes moving across lines of text. A few rows fade behind it. Use it while an agent reads a file.

- Use for: Reading a file
- Page: https://oxyn.space/components/square-read
- Install: `npx shadcn@latest add https://oxyn.space/r/square-read.json`

```tsx
import { SquareRead } from "@/components/square-read";

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

| Prop | Default | Description |
| --- | --- | --- |
| `dotShape` | "round" | Shape of each dot. |
| `dotSize` | 2.5 | Resting dot size in px. |
| `scale` | 1.5 | How many times larger a dot grows at the peak of the animation. |
| `density` | 11 | Dots across the width of the sheet. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 3.5 | Seconds for one read of the whole sheet, from the first dot until the trail clears the last row. |
| `gap` | 0.4 | Seconds to rest between reads. |
| `trail` | 3 | Rows the fading trail covers behind the read head. Keep it to 3–4 so the line being read stays clear. |
| `minOpacity` | 0.25 | Opacity of resting dots. The dot under the read head is always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Square Edit

A flat square of dots where a block of two or three rows is typed in dot by dot, like the changed lines of a diff. The cursor blinks once, the block lets go, and the next edit lands somewhere else. Use it while an agent edits a file.

- Use for: Editing a file
- Page: https://oxyn.space/components/square-edit
- Install: `npx shadcn@latest add https://oxyn.space/r/square-edit.json`

```tsx
import { SquareEdit } from "@/components/square-edit";

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

| Prop | Default | Description |
| --- | --- | --- |
| `dotShape` | "round" | Shape of each dot. |
| `dotSize` | 2.5 | Resting dot size in px. |
| `scale` | 1.5 | How many times larger a dot grows at the peak of the animation. |
| `density` | 11 | Dots across the width of the sheet. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 1.6 | Seconds for one edit: typing its rows in, the cursor blink, and letting go. |
| `gap` | 0.25 | Seconds to rest between edits. |
| `minOpacity` | 0.25 | Opacity of resting dots. Typed dots are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Square Stream

A flat square of dots where lines of uneven length land quickly row by row from the top. The newest line is brightest and older ones dim as new ones arrive, so it reads like scrolling output while no dot moves. Use it while an agent runs a command.

- Use for: Running a command, streaming output
- Page: https://oxyn.space/components/square-stream
- Install: `npx shadcn@latest add https://oxyn.space/r/square-stream.json`

```tsx
import { SquareStream } from "@/components/square-stream";

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

| Prop | Default | Description |
| --- | --- | --- |
| `dotShape` | "round" | Shape of each dot. |
| `dotSize` | 2.5 | Resting dot size in px. |
| `scale` | 1.5 | How many times larger a dot grows at the peak of the animation. |
| `density` | 11 | Dots across the width of the sheet. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 1.6 | Seconds for output lines to land on every row once, top to bottom. |
| `trail` | 3 | Older lines still lit behind the newest; each steps down as the next lands. Keep it to 3–4 so the newest line stays clear. |
| `minOpacity` | 0.25 | Opacity of resting dots. The newest line is always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Square Plan

A flat square of dots that ticks forward in reading order to a stop somewhere on the sheet; the dot it stopped on blinks, then it carries on forward or steps back to the next stop. When it reaches the end the sheet clears and starts again from empty, never turning back from the end. Pass progress to show that share of dots ticked instead. Use it while an agent works through a plan.

- Use for: Working through a plan
- Page: https://oxyn.space/components/square-plan
- Install: `npx shadcn@latest add https://oxyn.space/r/square-plan.json`

```tsx
import { SquarePlan } from "@/components/square-plan";

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

| Prop | Default | Description |
| --- | --- | --- |
| `dotShape` | "round" | Shape of each dot. |
| `dotSize` | 2.5 | Resting dot size in px. |
| `scale` | 1.5 | How many times larger a dot grows at the peak of the animation. |
| `density` | 11 | Dots across the width of the sheet. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 4 | Seconds the plan would take to tick the whole sheet; each move takes its share of that. |
| `gap` | 0.6 | Seconds the full sheet holds before it clears. |
| `progress` | 0.6 | How much of the plan is done, shown as that share of rows ticked. Leave the prop out in code to tick and clear on a loop. |
| `minOpacity` | 0.25 | Opacity of resting dots. Ticked dots are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Circle Pulse

A flat circle of dots where a round ring of swollen dots spreads from the center to the edge.

- Use for: Thinking
- Page: https://oxyn.space/components/circle-pulse
- Install: `npx shadcn@latest add https://oxyn.space/r/circle-pulse.json`

```tsx
import { CirclePulse } from "@/components/circle-pulse";

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

| Prop | Default | Description |
| --- | --- | --- |
| `dotShape` | "round" | Shape of each dot. |
| `dotSize` | 2.5 | Resting dot size in px. |
| `scale` | 1.5 | How many times larger a dot grows at the peak of the animation. |
| `density` | 11 | Dots across the width of the sheet. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 1.6 | Seconds for one ring to travel across the sheet. |
| `gap` | 0.3 | Seconds to rest between rings. |
| `ringWidth` | 0.35 | Thickness of the ring of large dots, as a fraction of the sheet radius. |
| `direction` | "out" | "out" spreads from the center to the edge; "in" closes from the edge to the center. |
| `minOpacity` | 0.25 | Opacity of resting dots. Dots at full size are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Circle Breath

A flat circle of dots that grows and shrinks together, one slow inhale and exhale per loop. Add ripple and the center breathes a beat before the edge.

- Use for: Idle or waiting
- Page: https://oxyn.space/components/circle-breath
- Install: `npx shadcn@latest add https://oxyn.space/r/circle-breath.json`

```tsx
import { CircleBreath } from "@/components/circle-breath";

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

| Prop | Default | Description |
| --- | --- | --- |
| `dotShape` | "round" | Shape of each dot. |
| `dotSize` | 2.5 | Resting dot size in px. |
| `scale` | 1.5 | How many times larger a dot grows at the peak of the animation. |
| `density` | 11 | Dots across the width of the sheet. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 2.4 | Seconds for one full breath (grow, then shrink). |
| `gap` | 0.2 | Seconds to rest between breaths. |
| `ripple` | 0 | Seconds the edge lags behind the center. 0 breathes in sync. |
| `minOpacity` | 0.25 | Opacity of resting dots. Dots at full size are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Circle Wave

A flat circle of dots that breathes in a sweep from left to right, each column swelling a beat after the one before it.

- Use for: Processing
- Page: https://oxyn.space/components/circle-wave
- Install: `npx shadcn@latest add https://oxyn.space/r/circle-wave.json`

```tsx
import { CircleWave } from "@/components/circle-wave";

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

| Prop | Default | Description |
| --- | --- | --- |
| `dotShape` | "round" | Shape of each dot. |
| `dotSize` | 2.5 | Resting dot size in px. |
| `scale` | 1.5 | How many times larger a dot grows at the peak of the animation. |
| `density` | 11 | Dots across the width of the sheet. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 1.2 | Seconds for one dot's full breath (grow, then shrink). |
| `gap` | 0.3 | Seconds to rest between waves. |
| `spread` | 0.9 | Seconds the far side lags behind the near side. Higher values make a slower, narrower wave. |
| `direction` | "right" | "right" sweeps from left to right; "left" sweeps from right to left. |
| `minOpacity` | 0.25 | Opacity of resting dots. Dots at full size are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Circle Fill

A flat circle of dots where a round ring spreads from the center and leaves every dot it passes swollen. Once the whole circle is full, a second ring follows and shrinks them back to rest.

- Use for: Loading
- Page: https://oxyn.space/components/circle-fill
- Install: `npx shadcn@latest add https://oxyn.space/r/circle-fill.json`

```tsx
import { CircleFill } from "@/components/circle-fill";

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

| Prop | Default | Description |
| --- | --- | --- |
| `dotShape` | "round" | Shape of each dot. |
| `dotSize` | 2.5 | Resting dot size in px. |
| `scale` | 1.5 | How many times larger a dot grows at the peak of the animation. |
| `density` | 11 | Dots across the width of the sheet. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 1.2 | Seconds for the ring to cross the sheet once. It crosses twice per loop: once to fill, once to empty. |
| `gap` | 0.3 | Seconds to rest between loops. |
| `ringWidth` | 0.35 | Thickness of the ring where dots are growing or shrinking, as a fraction of the sheet radius. |
| `direction` | "out" | "out" fills and empties from the center to the edge; "in" from the edge to the center. |
| `minOpacity` | 0.25 | Opacity of resting dots. Dots at full size are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Circle Ping

A flat circle of dots where a ring leaves the center for the edge, waits, and a fainter echo travels back in, like a request going out and its response coming home. Use it while an agent waits on a tool call.

- Use for: API call, tool call or MCP request
- Page: https://oxyn.space/components/circle-ping
- Install: `npx shadcn@latest add https://oxyn.space/r/circle-ping.json`

```tsx
import { CirclePing } from "@/components/circle-ping";

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

| Prop | Default | Description |
| --- | --- | --- |
| `dotShape` | "round" | Shape of each dot. |
| `dotSize` | 2.5 | Resting dot size in px. |
| `scale` | 1.5 | How many times larger a dot grows at the peak of the animation. |
| `density` | 11 | Dots across the width of the sheet. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 0.9 | Seconds for the ping to reach the edge, and for the echo to come back. |
| `wait` | 0.35 | Seconds between the ping reaching the edge and the echo setting off back. |
| `gap` | 0.5 | Seconds to rest after the echo lands, before the next ping. |
| `ringWidth` | 0.3 | Thickness of the ring of large dots, as a fraction of the sheet radius. |
| `minOpacity` | 0.25 | Opacity of resting dots. Dots inside the outgoing ring are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Circle Gather

A flat circle of dots where rings swell in turn from the edge inward, like things being collected, then the center dot pops once with the first ring, as if the bundle were sent. Use it while an agent gathers files to upload.

- Use for: Uploading
- Page: https://oxyn.space/components/circle-gather
- Install: `npx shadcn@latest add https://oxyn.space/r/circle-gather.json`

```tsx
import { CircleGather } from "@/components/circle-gather";

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

| Prop | Default | Description |
| --- | --- | --- |
| `dotShape` | "round" | Shape of each dot. |
| `dotSize` | 2.5 | Resting dot size in px. |
| `scale` | 1.5 | How many times larger a dot grows at the peak of the animation. |
| `density` | 11 | Dots across the width of the sheet. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 1.1 | Seconds for the rings to swell in turn from the edge to the center, before the center pops. |
| `gap` | 0.4 | Seconds to rest after the pop, before the next gather. |
| `minOpacity` | 0.25 | Opacity of resting dots. The center dot is always fully opaque as it pops. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Circle Await

A flat circle of dots that rests dim while only the center dot beats, a slow double beat like a heartbeat, the first ring echoing it softly. Calm and patient. Use it while an agent waits for the user to approve.

- Use for: Waiting on user approval
- Page: https://oxyn.space/components/circle-await
- Install: `npx shadcn@latest add https://oxyn.space/r/circle-await.json`

```tsx
import { CircleAwait } from "@/components/circle-await";

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

| Prop | Default | Description |
| --- | --- | --- |
| `dotShape` | "round" | Shape of each dot. |
| `dotSize` | 2.5 | Resting dot size in px. |
| `scale` | 1.5 | How many times larger a dot grows at the peak of the animation. |
| `density` | 11 | Dots across the width of the sheet. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 2.4 | Seconds for one heartbeat: the double beat, then the rest it settles into. |
| `gap` | 0.6 | Extra seconds to rest between heartbeats. |
| `minOpacity` | 0.25 | Opacity of resting dots. The whole sheet sits at this while it waits; the center dot is fully opaque at the beat. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Circle Radar

A flat circle of dots where a wedge sweeps clockwise around the center at a steady pace, swelling the dots it passes and leaving a fading trail, like a radar screen. Use it while an agent searches the web.

- Use for: Searching the web
- Page: https://oxyn.space/components/circle-radar
- Install: `npx shadcn@latest add https://oxyn.space/r/circle-radar.json`

```tsx
import { CircleRadar } from "@/components/circle-radar";

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

| Prop | Default | Description |
| --- | --- | --- |
| `dotShape` | "round" | Shape of each dot. |
| `dotSize` | 2.5 | Resting dot size in px. |
| `scale` | 1.5 | How many times larger a dot grows at the peak of the animation. |
| `density` | 11 | Dots across the width of the sheet. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 2 | Seconds for one turn of the sweep. |
| `minOpacity` | 0.25 | Opacity of resting dots. Dots at the sweep's edge are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Noise Drift

Thin concentric rings warped by smooth Perlin noise, so each line swells and settles in soft curves while its neighbors ripple along with it.

- Use for: Thinking
- Page: https://oxyn.space/components/noise-drift
- Install: `npx shadcn@latest add https://oxyn.space/r/noise-drift.json`

```tsx
import { NoiseDrift } from "@/components/noise-drift";

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

| Prop | Default | Description |
| --- | --- | --- |
| `lines` | 4 | Number of concentric rings. |
| `lineSpacing` | 3 | Gap between neighboring rings in px. Keep it low so the rings sit close together. |
| `lineWidth` | 1 | Stroke width of each ring in px. |
| `amplitude` | 8 | Strength of the noise: how far the outer ring is pushed in or out, in px. Inner rings move proportionally less. |
| `frequency` | 0.8 | How many bumps run around a ring. Low values give broad, soft swells; high values give tighter ripples. |
| `speed` | 0.7 | How fast the noise drifts over time. |
| `spread` | 0.12 | How differently neighboring rings move. 0 keeps them in lockstep; higher lets each ring wander on its own. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Noise Ripple

Thin noise rings that calm down while a push travels outward from the innermost ring, like a drop landing in water. Each ring brightens as the push passes through it.

- Use for: Responding
- Page: https://oxyn.space/components/noise-ripple
- Install: `npx shadcn@latest add https://oxyn.space/r/noise-ripple.json`

```tsx
import { NoiseRipple } from "@/components/noise-ripple";

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

| Prop | Default | Description |
| --- | --- | --- |
| `lines` | 4 | Number of concentric rings. |
| `lineSpacing` | 3 | Gap between neighboring rings in px. Keep it low so the rings sit close together. |
| `lineWidth` | 1 | Stroke width of each ring in px. |
| `amplitude` | 8 | Strength of the noise: how far the outer ring is pushed in or out, in px. Inner rings move proportionally less. |
| `frequency` | 0.8 | How many bumps run around a ring. Low values give broad, soft swells; high values give tighter ripples. |
| `speed` | 0.35 | How fast the noise drifts over time. |
| `duration` | 3.2 | Seconds for one push to travel from the innermost ring out through the outer one. |
| `spread` | 0.12 | How differently neighboring rings move. 0 keeps them in lockstep; higher lets each ring wander on its own. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Noise Breathe

Thin noise rings whose wobble swells and calms almost to perfect circles, over and over. The outer ring leads and each ring inward follows a moment later.

- Use for: Idle or listening
- Page: https://oxyn.space/components/noise-breathe
- Install: `npx shadcn@latest add https://oxyn.space/r/noise-breathe.json`

```tsx
import { NoiseBreathe } from "@/components/noise-breathe";

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

| Prop | Default | Description |
| --- | --- | --- |
| `lines` | 4 | Number of concentric rings. |
| `lineSpacing` | 3 | Gap between neighboring rings in px. Keep it low so the rings sit close together. |
| `lineWidth` | 1 | Stroke width of each ring in px. |
| `amplitude` | 8 | Strength of the noise: how far the outer ring is pushed in or out, in px. Inner rings move proportionally less. |
| `frequency` | 0.8 | How many bumps run around a ring. Low values give broad, soft swells; high values give tighter ripples. |
| `speed` | 0.35 | How fast the noise drifts over time. |
| `duration` | 2.7 | Seconds for one breath: the wobble swelling, calming and swelling again. |
| `spread` | 0.12 | How differently neighboring rings move. 0 keeps them in lockstep; higher lets each ring wander on its own. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Noise Swirl

Thin noise rings whose shape turns around the center. Inner rings fall a little behind as the turn winds up, then catch up, so the whole field twists and untwists.

- Use for: Thinking
- Page: https://oxyn.space/components/noise-swirl
- Install: `npx shadcn@latest add https://oxyn.space/r/noise-swirl.json`

```tsx
import { NoiseSwirl } from "@/components/noise-swirl";

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

| Prop | Default | Description |
| --- | --- | --- |
| `lines` | 4 | Number of concentric rings. |
| `lineSpacing` | 3 | Gap between neighboring rings in px. Keep it low so the rings sit close together. |
| `lineWidth` | 1 | Stroke width of each ring in px. |
| `amplitude` | 8 | Strength of the noise: how far the outer ring is pushed in or out, in px. Inner rings move proportionally less. |
| `frequency` | 0.8 | How many bumps run around a ring. Low values give broad, soft swells; high values give tighter ripples. |
| `speed` | 0.35 | How fast the noise drifts over time. |
| `duration` | 5.7 | Seconds for one full turn of the noise around the center. |
| `spread` | 0.12 | How differently neighboring rings move. 0 keeps them in lockstep; higher lets each ring wander on its own. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Noise Converge

Thin noise rings that close up onto the outer ring until they read as one bright line, hold a moment, then fan back out.

- Use for: Settling on an answer
- Page: https://oxyn.space/components/noise-converge
- Install: `npx shadcn@latest add https://oxyn.space/r/noise-converge.json`

```tsx
import { NoiseConverge } from "@/components/noise-converge";

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

| Prop | Default | Description |
| --- | --- | --- |
| `lines` | 4 | Number of concentric rings. |
| `lineSpacing` | 3 | Gap between neighboring rings in px. Keep it low so the rings sit close together. |
| `lineWidth` | 1 | Stroke width of each ring in px. |
| `amplitude` | 8 | Strength of the noise: how far the outer ring is pushed in or out, in px. Inner rings move proportionally less. |
| `frequency` | 0.8 | How many bumps run around a ring. Low values give broad, soft swells; high values give tighter ripples. |
| `speed` | 0.35 | How fast the noise drifts over time. |
| `duration` | 3.8 | Seconds for one close-up and fan-out. |
| `spread` | 0.12 | How differently neighboring rings move. 0 keeps them in lockstep; higher lets each ring wander on its own. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Noise Level

Thin noise rings whose wobble follows the level prop: calm circles at 0, full noise at 1. Feed it a live microphone or audio level; it glides, so raw readings are fine.

- Use for: Voice or audio input
- Page: https://oxyn.space/components/noise-level
- Install: `npx shadcn@latest add https://oxyn.space/r/noise-level.json`

```tsx
import { NoiseLevel } from "@/components/noise-level";

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

| Prop | Default | Description |
| --- | --- | --- |
| `level` | 0.5 | How strong the wobble is (0–1). Feed it a live microphone or audio level; it glides, so raw readings are fine. |
| `lines` | 4 | Number of concentric rings. |
| `lineSpacing` | 3 | Gap between neighboring rings in px. Keep it low so the rings sit close together. |
| `lineWidth` | 1 | Stroke width of each ring in px. |
| `amplitude` | 8 | Strength of the noise: how far the outer ring is pushed in or out, in px. Inner rings move proportionally less. |
| `frequency` | 0.8 | How many bumps run around a ring. Low values give broad, soft swells; high values give tighter ripples. |
| `speed` | 0.7 | How fast the noise drifts over time. |
| `spread` | 0.12 | How differently neighboring rings move. 0 keeps them in lockstep; higher lets each ring wander on its own. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Noise Flow

Thin noise rings that are born as calm circles at the center and travel steadily outward, picking up their wobble, until they fade at the edge. Use it while an agent uploads or sends something; set direction to in for downloading or receiving.

- Use for: Uploading or downloading
- Page: https://oxyn.space/components/noise-flow
- Install: `npx shadcn@latest add https://oxyn.space/r/noise-flow.json`

```tsx
import { NoiseFlow } from "@/components/noise-flow";

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

| Prop | Default | Description |
| --- | --- | --- |
| `direction` | "out" | "out" sends rings from the center to the edge (uploading, sending); "in" brings them from the edge to the center (downloading, receiving). |
| `lines` | 4 | Number of concentric rings. |
| `lineSpacing` | 3 | Gap between neighboring rings in px. Keep it low so the rings sit close together. |
| `lineWidth` | 1 | Stroke width of each ring in px. |
| `amplitude` | 8 | Strength of the noise: how far the outer ring is pushed in or out, in px. Inner rings move proportionally less. |
| `frequency` | 0.8 | How many bumps run around a ring. Low values give broad, soft swells; high values give tighter ripples. |
| `speed` | 0.35 | How fast the noise drifts over time. |
| `duration` | 2.4 | Seconds for one ring to travel from the center to the edge (or back, going in). |
| `spread` | 0.12 | How differently neighboring rings move. 0 keeps them in lockstep; higher lets each ring wander on its own. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Noise Stream

Thin noise rings that calm down while every token sends a small push out from the innermost ring, brightening each ring it passes. Tokens arrive at uneven gaps, so a burst reads as fast streaming. Use it while an agent streams its answer.

- Use for: Streaming an answer
- Page: https://oxyn.space/components/noise-stream
- Install: `npx shadcn@latest add https://oxyn.space/r/noise-stream.json`

```tsx
import { NoiseStream } from "@/components/noise-stream";

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

| Prop | Default | Description |
| --- | --- | --- |
| `rate` | 6 | Tokens per second. Gaps between tokens are uneven, short runs and a few pauses; this sets their average. |
| `lines` | 4 | Number of concentric rings. |
| `lineSpacing` | 3 | Gap between neighboring rings in px. Keep it low so the rings sit close together. |
| `lineWidth` | 1 | Stroke width of each ring in px. |
| `amplitude` | 8 | Strength of the noise: how far the outer ring is pushed in or out, in px. Inner rings move proportionally less. |
| `frequency` | 0.8 | How many bumps run around a ring. Low values give broad, soft swells; high values give tighter ripples. |
| `speed` | 0.35 | How fast the noise drifts over time. |
| `spread` | 0.12 | How differently neighboring rings move. 0 keeps them in lockstep; higher lets each ring wander on its own. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Noise Focus

Thin noise rings where a lens of three or four rings closes up around one ring, brightening and calming inside, while the lens glides slowly from the innermost ring to the outer and back. Use it while an agent reads closely or analyzes.

- Use for: Deep reading or analysis
- Page: https://oxyn.space/components/noise-focus
- Install: `npx shadcn@latest add https://oxyn.space/r/noise-focus.json`

```tsx
import { NoiseFocus } from "@/components/noise-focus";

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

| Prop | Default | Description |
| --- | --- | --- |
| `lines` | 4 | Number of concentric rings. |
| `lineSpacing` | 3 | Gap between neighboring rings in px. Keep it low so the rings sit close together. |
| `lineWidth` | 1 | Stroke width of each ring in px. |
| `amplitude` | 8 | Strength of the noise: how far the outer ring is pushed in or out, in px. Inner rings move proportionally less. |
| `frequency` | 0.8 | How many bumps run around a ring. Low values give broad, soft swells; high values give tighter ripples. |
| `speed` | 0.35 | How fast the noise drifts over time. |
| `duration` | 7.6 | Seconds for the lens to travel from the innermost ring out to the outer one and back. |
| `spread` | 0.12 | How differently neighboring rings move. 0 keeps them in lockstep; higher lets each ring wander on its own. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Noise Scatter

Thin noise rings whose wobble grows ring by ring from the center outward, sharpening into tight, fast ripples, then calms the same way. Use it while an agent searches broadly; switch to Noise Converge when it finds what it was after.

- Use for: Broad search
- Page: https://oxyn.space/components/noise-scatter
- Install: `npx shadcn@latest add https://oxyn.space/r/noise-scatter.json`

```tsx
import { NoiseScatter } from "@/components/noise-scatter";

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

| Prop | Default | Description |
| --- | --- | --- |
| `lines` | 4 | Number of concentric rings. |
| `lineSpacing` | 3 | Gap between neighboring rings in px. Keep it low so the rings sit close together. |
| `lineWidth` | 1 | Stroke width of each ring in px. |
| `amplitude` | 8 | Strength of the noise: how far the outer ring is pushed in or out, in px. Inner rings move proportionally less. |
| `frequency` | 0.8 | How many bumps run around a ring. Low values give broad, soft swells; high values give tighter ripples. |
| `speed` | 0.35 | How fast the noise drifts over time. |
| `duration` | 4.8 | Seconds for one scatter: the wobble growing out through the rings, then calming. |
| `spread` | 0.12 | How differently neighboring rings move. 0 keeps them in lockstep; higher lets each ring wander on its own. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Arc Spin

Concentric rings broken into arcs by evenly spaced cuts, turning steadily around the center with neighbors spinning against each other.

- Use for: Loading
- Page: https://oxyn.space/components/arc-spin
- Install: `npx shadcn@latest add https://oxyn.space/r/arc-spin.json`

```tsx
import { ArcSpin } from "@/components/arc-spin";

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

| Prop | Default | Description |
| --- | --- | --- |
| `lines` | 3 | Number of concentric rings. |
| `cuts` | 3 | Cuts in each ring. The ring is split into this many equal arcs. |
| `cutSpacing` | 30 | Angular width of each cut in degrees. 0 closes the rings. |
| `lineSpacing` | 8 | Gap between neighboring rings in px. |
| `lineWidth` | 1.5 | Stroke width of each ring in px. |
| `speed` | 0.3 | Pace of the animation, in turns per second of the outer ring at a steady spin. |
| `alternate` | true | Turn neighboring rings in opposite directions. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.4 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Arc Chase

Concentric rings of arcs where each arc's head runs ahead and its tail catches up, so the arcs stretch and shrink as they turn. Each ring runs a moment behind the one outside it.

- Use for: Working on a task
- Page: https://oxyn.space/components/arc-chase
- Install: `npx shadcn@latest add https://oxyn.space/r/arc-chase.json`

```tsx
import { ArcChase } from "@/components/arc-chase";

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

| Prop | Default | Description |
| --- | --- | --- |
| `lines` | 3 | Number of concentric rings. |
| `cuts` | 3 | Cuts in each ring. The ring is split into this many equal arcs. |
| `cutSpacing` | 30 | Angular width of each cut in degrees. 0 closes the rings. |
| `lineSpacing` | 8 | Gap between neighboring rings in px. |
| `lineWidth` | 1.5 | Stroke width of each ring in px. |
| `speed` | 0.3 | Pace of the animation, in turns per second of the outer ring at a steady spin. |
| `alternate` | true | Turn neighboring rings in opposite directions. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.4 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Arc Step

Concentric rings of arcs that each turn exactly one arc, then hold. The step starts at the outer ring and works inward like the dials of a combination lock, each ring brightening while it moves.

- Use for: Step-by-step progress
- Page: https://oxyn.space/components/arc-step
- Install: `npx shadcn@latest add https://oxyn.space/r/arc-step.json`

```tsx
import { ArcStep } from "@/components/arc-step";

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

| Prop | Default | Description |
| --- | --- | --- |
| `lines` | 3 | Number of concentric rings. |
| `cuts` | 3 | Cuts in each ring. The ring is split into this many equal arcs. |
| `cutSpacing` | 30 | Angular width of each cut in degrees. 0 closes the rings. |
| `lineSpacing` | 8 | Gap between neighboring rings in px. |
| `lineWidth` | 1.5 | Stroke width of each ring in px. |
| `speed` | 0.3 | Pace of the animation, in turns per second of the outer ring at a steady spin. |
| `alternate` | true | Turn neighboring rings in opposite directions. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.4 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Arc Gather

Concentric rings of arcs drifting slowly while their cuts close until each ring is whole, then reopen. The closing travels inward, a few rings at a time.

- Use for: Assembling a result
- Page: https://oxyn.space/components/arc-gather
- Install: `npx shadcn@latest add https://oxyn.space/r/arc-gather.json`

```tsx
import { ArcGather } from "@/components/arc-gather";

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

| Prop | Default | Description |
| --- | --- | --- |
| `lines` | 3 | Number of concentric rings. |
| `cuts` | 3 | Cuts in each ring. The ring is split into this many equal arcs. |
| `cutSpacing` | 30 | Angular width of each cut in degrees. 0 closes the rings. |
| `lineSpacing` | 8 | Gap between neighboring rings in px. |
| `lineWidth` | 1.5 | Stroke width of each ring in px. |
| `speed` | 0.3 | Pace of the animation, in turns per second of the outer ring at a steady spin. |
| `alternate` | true | Turn neighboring rings in opposite directions. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.4 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Arc Ripple

Concentric rings of arcs drifting slowly while each ring pulls toward the center and lets go. The pull travels from the outer ring inward, brightening the rings it passes through.

- Use for: Processing
- Page: https://oxyn.space/components/arc-ripple
- Install: `npx shadcn@latest add https://oxyn.space/r/arc-ripple.json`

```tsx
import { ArcRipple } from "@/components/arc-ripple";

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

| Prop | Default | Description |
| --- | --- | --- |
| `lines` | 3 | Number of concentric rings. |
| `cuts` | 3 | Cuts in each ring. The ring is split into this many equal arcs. |
| `cutSpacing` | 30 | Angular width of each cut in degrees. 0 closes the rings. |
| `lineSpacing` | 8 | Gap between neighboring rings in px. |
| `lineWidth` | 1.5 | Stroke width of each ring in px. |
| `speed` | 0.3 | Pace of the animation, in turns per second of the outer ring at a steady spin. |
| `alternate` | true | Turn neighboring rings in opposite directions. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.4 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Arc Gears

Concentric rings of arcs turning like gears: each ring inward turns one step faster than the one outside it, so every ring's cuts line up again on a regular beat.

- Use for: Running a task
- Page: https://oxyn.space/components/arc-gears
- Install: `npx shadcn@latest add https://oxyn.space/r/arc-gears.json`

```tsx
import { ArcGears } from "@/components/arc-gears";

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

| Prop | Default | Description |
| --- | --- | --- |
| `lines` | 3 | Number of concentric rings. |
| `cuts` | 3 | Cuts in each ring. The ring is split into this many equal arcs. |
| `cutSpacing` | 30 | Angular width of each cut in degrees. 0 closes the rings. |
| `lineSpacing` | 8 | Gap between neighboring rings in px. |
| `lineWidth` | 1.5 | Stroke width of each ring in px. |
| `speed` | 0.3 | Pace of the animation, in turns per second of the outer ring at a steady spin. |
| `alternate` | true | Turn neighboring rings in opposite directions. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.4 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Arc Comet

Concentric rings of arcs turning steadily, each arc fading from a bright head to a faint tail so the direction of travel reads at a glance.

- Use for: Thinking
- Page: https://oxyn.space/components/arc-comet
- Install: `npx shadcn@latest add https://oxyn.space/r/arc-comet.json`

```tsx
import { ArcComet } from "@/components/arc-comet";

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

| Prop | Default | Description |
| --- | --- | --- |
| `lines` | 3 | Number of concentric rings. |
| `cuts` | 3 | Cuts in each ring. The ring is split into this many equal arcs. |
| `cutSpacing` | 30 | Angular width of each cut in degrees. 0 closes the rings. |
| `lineSpacing` | 8 | Gap between neighboring rings in px. |
| `lineWidth` | 1.5 | Stroke width of each ring in px. |
| `speed` | 0.3 | Pace of the animation, in turns per second of the outer ring at a steady spin. |
| `alternate` | true | Turn neighboring rings in opposite directions. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.4 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Arc Unlock

Concentric rings of arcs that click round by whole arcs in different amounts, like a combination lock trying codes. Then every cut lines up, the rings glow while they hold, and they fall back to rest. Use it while an agent searches or looks for a match.

- Use for: Searching or matching
- Page: https://oxyn.space/components/arc-unlock
- Install: `npx shadcn@latest add https://oxyn.space/r/arc-unlock.json`

```tsx
import { ArcUnlock } from "@/components/arc-unlock";

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

| Prop | Default | Description |
| --- | --- | --- |
| `lines` | 3 | Number of concentric rings. |
| `cuts` | 3 | Cuts in each ring. The ring is split into this many equal arcs. |
| `cutSpacing` | 30 | Angular width of each cut in degrees. 0 closes the rings. |
| `lineSpacing` | 8 | Gap between neighboring rings in px. |
| `lineWidth` | 1.5 | Stroke width of each ring in px. |
| `speed` | 0.3 | Pace of the animation, in turns per second of the outer ring at a steady spin. |
| `alternate` | true | Turn neighboring rings in opposite directions. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.4 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Arc Write

Concentric rings of arcs that draw themselves on from the tail, hold, then erase from the tail, each pass one arc further round. The writing works inward from the outer ring, a few rings at a time. Use it while an agent writes or edits.

- Use for: Writing or editing a file
- Page: https://oxyn.space/components/arc-write
- Install: `npx shadcn@latest add https://oxyn.space/r/arc-write.json`

```tsx
import { ArcWrite } from "@/components/arc-write";

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

| Prop | Default | Description |
| --- | --- | --- |
| `lines` | 3 | Number of concentric rings. |
| `cuts` | 3 | Cuts in each ring. The ring is split into this many equal arcs. |
| `cutSpacing` | 30 | Angular width of each cut in degrees. 0 closes the rings. |
| `lineSpacing` | 8 | Gap between neighboring rings in px. |
| `lineWidth` | 1.5 | Stroke width of each ring in px. |
| `speed` | 0.3 | Pace of the animation, in turns per second of the outer ring at a steady spin. |
| `alternate` | true | Turn neighboring rings in opposite directions. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.4 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Arc Tasks

Concentric rings of arcs, each one a running call turning at its own pace, surging and easing off on its own beat. As calls finish, rings close into whole circles, dim and stop, from the innermost outward. Use it while an agent runs several tool calls in parallel.

- Use for: Parallel tool calls and subagents
- Page: https://oxyn.space/components/arc-tasks
- Install: `npx shadcn@latest add https://oxyn.space/r/arc-tasks.json`

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

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

| Prop | Default | Description |
| --- | --- | --- |
| `lines` | 3 | Number of concentric rings. |
| `cuts` | 3 | Cuts in each ring. The ring is split into this many equal arcs. |
| `cutSpacing` | 30 | Angular width of each cut in degrees. 0 closes the rings. |
| `lineSpacing` | 8 | Gap between neighboring rings in px. |
| `lineWidth` | 1.5 | Stroke width of each ring in px. |
| `speed` | 0.3 | Pace of the animation, in turns per second of the outer ring at a steady spin. |
| `alternate` | true | Turn neighboring rings in opposite directions. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.4 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `active` | 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` | "Thinking" | Accessible name; the wrapper is role="status". |

## Arc Progress

Concentric rings of arcs. The outer ring lights clockwise from 12 o'clock up to the progress over a faint track while the inner rings turn slowly to show it is working; leave progress out and it fills and empties on a loop. Use it while an agent uploads or downloads.

- Use for: Upload or download progress
- Page: https://oxyn.space/components/arc-progress
- Install: `npx shadcn@latest add https://oxyn.space/r/arc-progress.json`

```tsx
import { ArcProgress } from "@/components/arc-progress";

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

| Prop | Default | Description |
| --- | --- | --- |
| `lines` | 3 | Number of concentric rings. |
| `cuts` | 3 | Cuts in each ring. The ring is split into this many equal arcs. |
| `cutSpacing` | 30 | Angular width of each cut in degrees. 0 closes the rings. |
| `lineSpacing` | 8 | Gap between neighboring rings in px. |
| `lineWidth` | 1.5 | Stroke width of each ring in px. |
| `speed` | 0.3 | Pace of the animation, in turns per second of the outer ring at a steady spin. |
| `alternate` | true | Turn neighboring rings in opposite directions. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.4 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `progress` | 0.6 | How much has transferred. Leave the prop out in code to fill and empty on a loop. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Bar Comet

A fence of thin bars standing around a circle. Each bar snaps longer, outward or inward, as the head reaches it and falls back slowly, so the head drags a tail that fades out behind it.

- Use for: Thinking or running a tool
- Page: https://oxyn.space/components/bar-comet
- Install: `npx shadcn@latest add https://oxyn.space/r/bar-comet.json`

```tsx
import { BarComet } from "@/components/bar-comet";

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

| Prop | Default | Description |
| --- | --- | --- |
| `bars` | 36 | Number of bars around the ring. |
| `barHeight` | 12 | Resting height of each bar in px, pointing away from the center. |
| `barWidth` | 2 | Thickness of each bar in px. Capped so neighbors never overlap. |
| `radius` | 1 | Corner radius of each bar in px. |
| `extend` | 10 | How far the comet's head grows a bar in px. The end away from the push never moves. |
| `duration` | 0.5 | Seconds one bar takes to snap out and fade back: the length of the tail. |
| `stagger` | 0.05 | Seconds between one bar starting and the next, going clockwise. |
| `direction` | "out" | Which way the push carries a bar: away from the center, or toward it. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of resting bars. Bars at the peak of the wave are always fully opaque. |
| `color` | "#e4e4e7" | Bar color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Bar Twin

A fence of thin bars standing around a circle. Two or more narrow waves, evenly spaced, travel round the ring together, each moving a few bars outward or inward at a time.

- Use for: Parallel tool calls and subagents
- Page: https://oxyn.space/components/bar-twin
- Install: `npx shadcn@latest add https://oxyn.space/r/bar-twin.json`

```tsx
import { BarTwin } from "@/components/bar-twin";

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

| Prop | Default | Description |
| --- | --- | --- |
| `bars` | 36 | Number of bars around the ring. |
| `barHeight` | 12 | Resting height of each bar in px, pointing away from the center. |
| `barWidth` | 2 | Thickness of each bar in px. Capped so neighbors never overlap. |
| `radius` | 1 | Corner radius of each bar in px. |
| `extend` | 10 | How far each wave moves a bar in px. The bar keeps its height. |
| `duration` | 0.24 | Seconds one bar takes to move out and back. |
| `stagger` | 0.06 | Seconds between one bar starting and the next, going clockwise. |
| `direction` | "out" | Which way the push carries a bar: away from the center, or toward it. |
| `heads` | 2 | Waves travelling round the ring at once, evenly spaced. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of resting bars. Bars at the peak of the wave are always fully opaque. |
| `color` | "#e4e4e7" | Bar color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Bar Read

A fence of thin bars standing around a circle. A small wave travels round at a steady, unhurried pace, lighting a few bars at a time and barely moving them, like a cursor reading down a file.

- Use for: Reading a file
- Page: https://oxyn.space/components/bar-read
- Install: `npx shadcn@latest add https://oxyn.space/r/bar-read.json`

```tsx
import { BarRead } from "@/components/bar-read";

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

| Prop | Default | Description |
| --- | --- | --- |
| `bars` | 36 | Number of bars around the ring. |
| `barHeight` | 12 | Resting height of each bar in px, pointing away from the center. |
| `barWidth` | 2 | Thickness of each bar in px. Capped so neighbors never overlap. |
| `radius` | 1 | Corner radius of each bar in px. |
| `extend` | 10 | How far a full push would grow a bar in px; reading uses about a third of it. |
| `duration` | 0.32 | Seconds one bar stays lit as the reading passes. |
| `stagger` | 0.09 | Seconds between one bar lighting and the next, going clockwise. |
| `direction` | "out" | Which way the push carries a bar: away from the center, or toward it. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of resting bars. Bars at the peak of the wave are always fully opaque. |
| `color` | "#e4e4e7" | Bar color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Bar Write

A fence of thin bars standing around a circle. Going clockwise, bars are typed in bursts of four: each pops and settles to a short mark. Once the ring is written the marks are wiped in the same order.

- Use for: Editing or writing a file
- Page: https://oxyn.space/components/bar-write
- Install: `npx shadcn@latest add https://oxyn.space/r/bar-write.json`

```tsx
import { BarWrite } from "@/components/bar-write";

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

| Prop | Default | Description |
| --- | --- | --- |
| `bars` | 36 | Number of bars around the ring. |
| `barHeight` | 12 | Resting height of each bar in px, pointing away from the center. |
| `barWidth` | 2 | Thickness of each bar in px. Capped so neighbors never overlap. |
| `radius` | 1 | Corner radius of each bar in px. |
| `extend` | 10 | How far a keystroke grows a bar in px. The mark it leaves is about a third of that. |
| `duration` | 0.2 | Seconds one keystroke takes to pop and settle to its mark. |
| `stagger` | 0.05 | Seconds between keystrokes; bars are typed in bursts of four. |
| `direction` | "out" | Which way the push carries a bar: away from the center, or toward it. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of resting bars. Bars at the peak of the wave are always fully opaque. |
| `color` | "#e4e4e7" | Bar color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Bar Seek

A fence of thin bars standing around a circle. A narrow wave runs eight bars forward, slows, backs up three and runs on, like hunting back and forth for a match.

- Use for: Searching (grep, web)
- Page: https://oxyn.space/components/bar-seek
- Install: `npx shadcn@latest add https://oxyn.space/r/bar-seek.json`

```tsx
import { BarSeek } from "@/components/bar-seek";

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

| Prop | Default | Description |
| --- | --- | --- |
| `bars` | 36 | Number of bars around the ring. |
| `barHeight` | 12 | Resting height of each bar in px, pointing away from the center. |
| `barWidth` | 2 | Thickness of each bar in px. Capped so neighbors never overlap. |
| `radius` | 1 | Corner radius of each bar in px. |
| `extend` | 10 | How far the seek moves a bar in px. The bar keeps its height. |
| `duration` | 0.24 | How wide the seek is, in seconds of travel: its width in bars is this ÷ stagger. |
| `stagger` | 0.06 | Seconds the seek takes to run past one bar. |
| `direction` | "out" | Which way the push carries a bar: away from the center, or toward it. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of resting bars. Bars at the peak of the wave are always fully opaque. |
| `color` | "#e4e4e7" | Bar color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Bar Stream

A fence of thin bars standing around a circle. Short pulses chase each other clockwise in a burst of three, a pair and a long gap, like tokens streaming in.

- Use for: Running a command, streaming output
- Page: https://oxyn.space/components/bar-stream
- Install: `npx shadcn@latest add https://oxyn.space/r/bar-stream.json`

```tsx
import { BarStream } from "@/components/bar-stream";

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

| Prop | Default | Description |
| --- | --- | --- |
| `bars` | 36 | Number of bars around the ring. |
| `barHeight` | 12 | Resting height of each bar in px, pointing away from the center. |
| `barWidth` | 2 | Thickness of each bar in px. Capped so neighbors never overlap. |
| `radius` | 1 | Corner radius of each bar in px. |
| `extend` | 10 | How far each pulse grows a bar in px. The end away from the push never moves. |
| `duration` | 0.08 | Seconds one pulse takes to pass a bar. |
| `stagger` | 0.03 | Seconds between one bar pulsing and the next, going clockwise. |
| `direction` | "out" | Which way the push carries a bar: away from the center, or toward it. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of resting bars. Bars at the peak of the wave are always fully opaque. |
| `color` | "#e4e4e7" | Bar color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Bar Transfer

A fence of thin bars standing around a circle. Bars fill clockwise up to the progress while the leading bar pulses. Use direction out for an upload and in for a download; leave progress out and it fills and drains on a loop.

- Use for: Uploading or downloading
- Page: https://oxyn.space/components/bar-transfer
- Install: `npx shadcn@latest add https://oxyn.space/r/bar-transfer.json`

```tsx
import { BarTransfer } from "@/components/bar-transfer";

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

| Prop | Default | Description |
| --- | --- | --- |
| `bars` | 36 | Number of bars around the ring. |
| `barHeight` | 12 | Resting height of each bar in px, pointing away from the center. |
| `barWidth` | 2 | Thickness of each bar in px. Capped so neighbors never overlap. |
| `radius` | 1 | Corner radius of each bar in px. |
| `extend` | 10 | How far a transferred bar grows in px. |
| `duration` | 0.16 | Seconds one bar takes to grow; the leading bar pulses every four of these. |
| `stagger` | 0.04 | Seconds between one bar filling and the next while looping. |
| `direction` | "out" | Which way the push carries a bar: away from the center, or toward it. |
| `progress` | 0.6 | How much has transferred. Leave the prop out in code to fill and drain on a loop. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of resting bars. Bars at the peak of the wave are always fully opaque. |
| `color` | "#e4e4e7" | Bar color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Bar Ping

A fence of thin bars standing around a circle. A pulse leaves 12 o'clock both ways and meets at 6, waits, then comes back to 12, like a request going out and its response returning.

- Use for: API call or MCP request
- Page: https://oxyn.space/components/bar-ping
- Install: `npx shadcn@latest add https://oxyn.space/r/bar-ping.json`

```tsx
import { BarPing } from "@/components/bar-ping";

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

| Prop | Default | Description |
| --- | --- | --- |
| `bars` | 36 | Number of bars around the ring. |
| `barHeight` | 12 | Resting height of each bar in px, pointing away from the center. |
| `barWidth` | 2 | Thickness of each bar in px. Capped so neighbors never overlap. |
| `radius` | 1 | Corner radius of each bar in px. |
| `extend` | 10 | How far the ping moves a bar in px. The bar keeps its height. |
| `duration` | 0.2 | Seconds one bar takes to move out and back; the ring waits two of these at each end. |
| `stagger` | 0.04 | Seconds between one bar moving and the next, out from 12 o'clock both ways and back. |
| `direction` | "out" | Which way the push carries a bar: away from the center, or toward it. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of resting bars. Bars at the peak of the wave are always fully opaque. |
| `color` | "#e4e4e7" | Bar color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Bar Plan

A fence of thin bars standing around a circle, cut into equal segments, one per step of a plan. Finished steps hold grown, a sweep runs through the current step over and over, and the steps still to come rest.

- Use for: Working through a plan
- Page: https://oxyn.space/components/bar-plan
- Install: `npx shadcn@latest add https://oxyn.space/r/bar-plan.json`

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

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

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

## Dot Globe

The whole globe row as one component. Pick spin, cascade, lift, tide, twist, scan, rise, sweep, compact or swarm with the animation prop; changing it cross-fades from one animation to the next, and the shared props glide instead of jumping.

- Use for: Switching between agent states with one component
- Page: https://oxyn.space/components/dot-globe
- Install: `npx shadcn@latest add https://oxyn.space/r/dot-globe.json`

Animations (`animation` prop): `spin`, `cascade`, `lift`, `tide`, `twist`, `scan`, `rise`, `sweep`, `compact`, `swarm`.

```tsx
import { DotGlobe } from "@/components/dot-globe";

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

| Prop | Default | Description |
| --- | --- | --- |
| `animation` | "spin" | Which animation runs. Changing it blends from the old animation to the new one; every other prop keeps its value. |
| `pattern` | "rings" | How the dots are laid out on the sphere. |
| `dotSize` | 3 | Diameter of the front dots in px. Back dots scale down automatically. |
| `density` | 12 | Rows of dots. Higher means more dots. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 1 | Seconds for one full 360° turn. |
| `gap` | 0.4 | Seconds to rest between turns. 0 spins continuously; above 0 each turn eases in and out. |
| `direction` | "left" | Spin direction around the vertical axis. |
| `tilt` | 18 | Lean toward the viewer in degrees, so the top shows. |
| `backOpacity` | 0.2 | Opacity of the furthest dots. Front dots are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Dot Square

The whole square row as one component. Pick pulse, breath, wave, fill, read, edit, stream or plan with the animation prop; changing it morphs the same dots from one animation into the next.

- Use for: Switching between agent states with one component
- Page: https://oxyn.space/components/dot-square
- Install: `npx shadcn@latest add https://oxyn.space/r/dot-square.json`

Animations (`animation` prop): `pulse`, `breath`, `wave`, `fill`, `read`, `edit`, `stream`, `plan`.

```tsx
import { DotSquare } from "@/components/dot-square";

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

| Prop | Default | Description |
| --- | --- | --- |
| `animation` | "pulse" | Which animation runs. Changing it blends from the old animation to the new one; every other prop keeps its value. |
| `dotShape` | "round" | Shape of each dot. |
| `dotSize` | 2.5 | Resting dot size in px. |
| `scale` | 1.5 | How many times larger a dot grows at the peak of the animation. |
| `density` | 11 | Dots across the width of the sheet. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 1.6 | Seconds for one ring to travel across the sheet. |
| `gap` | 0.3 | Seconds to rest between rings. |
| `ringWidth` | 0.35 | Thickness of the ring of large dots, as a fraction of the sheet radius. |
| `direction` | "out" | "out" spreads from the center to the edge; "in" closes from the edge to the center. |
| `minOpacity` | 0.25 | Opacity of resting dots. Dots at full size are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Dot Circle

The whole circle row as one component. Pick pulse, breath, wave, fill, ping, gather, await or radar with the animation prop; changing it morphs the same dots from one animation into the next.

- Use for: Switching between agent states with one component
- Page: https://oxyn.space/components/dot-circle
- Install: `npx shadcn@latest add https://oxyn.space/r/dot-circle.json`

Animations (`animation` prop): `pulse`, `breath`, `wave`, `fill`, `ping`, `gather`, `await`, `radar`.

```tsx
import { DotCircle } from "@/components/dot-circle";

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

| Prop | Default | Description |
| --- | --- | --- |
| `animation` | "pulse" | Which animation runs. Changing it blends from the old animation to the new one; every other prop keeps its value. |
| `dotShape` | "round" | Shape of each dot. |
| `dotSize` | 2.5 | Resting dot size in px. |
| `scale` | 1.5 | How many times larger a dot grows at the peak of the animation. |
| `density` | 11 | Dots across the width of the sheet. |
| `size` | 160 | Width and height of the orb in px. |
| `duration` | 1.6 | Seconds for one ring to travel across the sheet. |
| `gap` | 0.3 | Seconds to rest between rings. |
| `ringWidth` | 0.35 | Thickness of the ring of large dots, as a fraction of the sheet radius. |
| `direction` | "out" | "out" spreads from the center to the edge; "in" closes from the edge to the center. |
| `minOpacity` | 0.25 | Opacity of resting dots. Dots at full size are always fully opaque. |
| `color` | "#e4e4e7" | Dot color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Noise Rings

The whole noise rings row as one component. Pick drift, ripple, breathe, swirl, converge, level, flow, stream, focus or scatter with the animation prop; changing it morphs the same rings from one motion into the next.

- Use for: Switching between agent states with one component
- Page: https://oxyn.space/components/noise-rings
- Install: `npx shadcn@latest add https://oxyn.space/r/noise-rings.json`

Animations (`animation` prop): `drift`, `ripple`, `breathe`, `swirl`, `converge`, `level`, `flow`, `stream`, `focus`, `scatter`.

```tsx
import { NoiseRings } from "@/components/noise-rings";

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

| Prop | Default | Description |
| --- | --- | --- |
| `animation` | "drift" | Which animation runs. Changing it blends from the old animation to the new one; every other prop keeps its value. |
| `lines` | 4 | Number of concentric rings. |
| `lineSpacing` | 3 | Gap between neighboring rings in px. Keep it low so the rings sit close together. |
| `lineWidth` | 1 | Stroke width of each ring in px. |
| `amplitude` | 8 | Strength of the noise: how far the outer ring is pushed in or out, in px. Inner rings move proportionally less. |
| `frequency` | 0.8 | How many bumps run around a ring. Low values give broad, soft swells; high values give tighter ripples. |
| `speed` | 0.7 | How fast the noise drifts over time. |
| `spread` | 0.12 | How differently neighboring rings move. 0 keeps them in lockstep; higher lets each ring wander on its own. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Arc Rings

The whole arcs row as one component. Pick spin, chase, step, gather, ripple, gears, comet, unlock, write, tasks or progress with the animation prop; changing it morphs the same arcs from one motion into the next.

- Use for: Switching between agent states with one component
- Page: https://oxyn.space/components/arc-rings
- Install: `npx shadcn@latest add https://oxyn.space/r/arc-rings.json`

Animations (`animation` prop): `spin`, `chase`, `step`, `gather`, `ripple`, `gears`, `comet`, `unlock`, `write`, `tasks`, `progress`.

```tsx
import { ArcRings } from "@/components/arc-rings";

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

| Prop | Default | Description |
| --- | --- | --- |
| `animation` | "spin" | Which animation runs. Changing it blends from the old animation to the new one; every other prop keeps its value. |
| `lines` | 3 | Number of concentric rings. |
| `cuts` | 3 | Cuts in each ring. The ring is split into this many equal arcs. |
| `cutSpacing` | 30 | Angular width of each cut in degrees. 0 closes the rings. |
| `lineSpacing` | 8 | Gap between neighboring rings in px. |
| `lineWidth` | 1.5 | Stroke width of each ring in px. |
| `speed` | 0.3 | Pace of the animation, in turns per second of the outer ring at a steady spin. |
| `alternate` | true | Turn neighboring rings in opposite directions. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.4 | Opacity of the innermost ring. The outer ring is always fully opaque. |
| `color` | "#e4e4e7" | Line color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |

## Bar Ring

The whole bars row as one component. Pick an animation for each AI state (read, comet, twin, write, seek, stream, transfer, ping or plan) with the animation prop, and outward or inward with direction; changing either glides the same bars from one motion into the next.

- Use for: Switching between agent states with one component
- Page: https://oxyn.space/components/bar-ring
- Install: `npx shadcn@latest add https://oxyn.space/r/bar-ring.json`

Animations (`animation` prop): `read`, `comet`, `twin`, `write`, `seek`, `stream`, `transfer`, `ping`, `plan`.

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

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

| Prop | Default | Description |
| --- | --- | --- |
| `animation` | "read" | Which animation runs. Changing it blends from the old animation to the new one; every other prop keeps its value. |
| `bars` | 36 | Number of bars around the ring. |
| `barHeight` | 12 | Resting height of each bar in px, pointing away from the center. |
| `barWidth` | 2 | Thickness of each bar in px. Capped so neighbors never overlap. |
| `radius` | 1 | Corner radius of each bar in px. |
| `extend` | 10 | How far a full push would grow a bar in px; reading uses about a third of it. |
| `duration` | 0.32 | Seconds one bar stays lit as the reading passes. |
| `stagger` | 0.09 | Seconds between one bar lighting and the next, going clockwise. |
| `direction` | "out" | Which way the push carries a bar: away from the center, or toward it. |
| `size` | 160 | Width and height of the orb in px. |
| `minOpacity` | 0.35 | Opacity of resting bars. Bars at the peak of the wave are always fully opaque. |
| `color` | "#e4e4e7" | Bar color. |
| `paused` | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| `label` | "Thinking" | Accessible name; the wrapper is role="status". |