# Activity Rings
URL: https://remocn.dev/docs/numbers/activity-rings

Concentric activity rings lap their goal while three metrics count up beside them

- Install: `npx shadcn@latest add @remocn/activity-rings`
- Vibe: playful
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/activity-rings
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ActivityRings } from "@/components/remocn/activity-rings";

const ActivityRingsScene = () => (
  <ActivityRings
    title="This quarter"
    rings={[
      { label: "Renders", value: 2400, goal: 1.2 },
      { label: "Templates", value: 64, goal: 1.1 },
      { label: "Hours saved", value: 420, unit: "h", goal: 1.05 },
    ]}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="ActivityRings"
    component={ActivityRingsScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Three concentric rings fill clockwise one after another, snap closed, then lap past their goal with a check mark while the labels count up beside them. Pass `rings` (label, value, optional unit, and a `goal` fraction such as 1.14) and a `title`. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `rings` | `ActivityRing[]` | `DEFAULT_RINGS` | Up to three rings, outermost first. |
| `title` | `string` | `"This month"` | Small heading above the readouts. |
| `accent` | `string` | `"#3B5BFD"` | Color of the outer hero ring. |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette. |

## Use when
- A monthly or quarterly recap beat where three usage metrics all beat their goals at once.
- A product-update video that needs a friendly goals-hit moment with several readouts counting up.
- A wrapped-style summary scene where each metric closes a ring and then laps past 100%.

## Don't use when
- You have one headline percentage to land, not three metrics — use `share-donut`.
- You need a single big number with no chart — use `compact-stat`.
- You are comparing many categories side by side — use `spring-bars`.