# Radar Compare
URL: https://remocn.dev/docs/numbers/radar-compare

A radar polygon for Remocn grows over a competitor outline next to the name and tagline

- Install: `npx shadcn@latest add @remocn/radar-compare`
- Vibe: data
- Natural length: 132f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/radar-compare
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { RadarCompare } from "@/components/remocn/radar-compare";

const RadarCompareScene = () => (
  <RadarCompare
    axes={["Speed", "Docs", "Price", "Support", "Polish", "Fit"]}
    brandLabel="remocn"
    caption="Strong on every axis."
  />
);

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

A radar grid appears and the competitor outline draws and fills. The brand polygon then springs out axis by axis over it, the chart slides left and the brand name, competitor name and a caption appear on the right. Pass `axes` with matching `competitor` and `brand` values from 0 to 1, plus `brandLabel`, `competitorLabel` and `caption`. It ships light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `axes` | `string[]` | `DEFAULT_AXES` | Axis names around the radar. Up to eight are used, minimum three. |
| `competitor` | `number[]` | `DEFAULT_COMPETITOR` | Competitor values from 0 to 1, one per axis. |
| `brand` | `number[]` | `DEFAULT_BRAND` | Brand values from 0 to 1, one per axis. |
| `brandLabel` | `string` | `"remocn"` | Name of your product in the side panel. |
| `competitorLabel` | `string` | `"Kitebase"` | Name of the competitor in the side panel. |
| `caption` | `string` | — | Optional line of text under the names. |
| `accent` | `string` | `"#3B5BFD"` | Highlight colour of the brand polygon. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier; 1 is the designed pace. |

## Use when
- A feature-comparison beat where your product's strengths bulge past a competitor's outline on a six-axis radar.
- A positioning scene that shows balanced strength across several attributes, then settles beside the brand name and a tagline.
- A launch video moment that needs a visual head-to-head without printing a table of numbers.

## Don't use when
- You only have one measure to compare and want a bar — use `measure-dim`.
- Competitors should be spread across two axes rather than overlaid on one shape — use `quadrant-plot`.
- You want rows of before and after values — use `dumbbell-shift`.