# Quadrant Plot
URL: https://remocn.dev/docs/numbers/quadrant-plot

Competitors scatter on a quadrant plot and the Remocn marker lands in the best corner

- Install: `npx shadcn@latest add @remocn/quadrant-plot`
- Vibe: data
- Natural length: 110f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/quadrant-plot
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { QuadrantPlot } from "@/components/remocn/quadrant-plot";

const QuadrantPlotScene = () => (
  <QuadrantPlot
    xLabels={["Slow", "Fast"]}
    yLabels={["Hard", "Easy"]}
    brand={{ label: "remocn", x: 0.9, y: 0.88 }}
  />
);

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

Axes and corner marks draw in, the competitor dots drop onto the grid, and then the brand marker flies in along a curved path and lands in its quadrant. A ring, a wash and a guide line spotlight it afterwards. Pass `points` and `brand` as 0-1 coordinates, and `xLabels` and `yLabels` for the two axes. It ships light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `xLabels` | `[string, string]` | `["Slow", "Fast"]` | Low and high ends of the horizontal axis, left then right. |
| `yLabels` | `[string, string]` | `["Hard", "Easy"]` | Low and high ends of the vertical axis, bottom then top. |
| `points` | `QuadrantPoint[]` | `DEFAULT_POINTS` | Competitor dots: label plus x and y from 0 to 1. |
| `brand` | `QuadrantPoint` | `DEFAULT_BRAND` | The hero marker that lands last, with label and x, y from 0 to 1. |
| `accent` | `string` | `"#3B5BFD"` | Colour of the brand marker before the spotlight wash. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier; 1 is the designed pace. |

## Use when
- A positioning beat that places competitors on a two-axis map and then lands your product in the best corner.
- A market-comparison scene with named axes such as speed against ease, ending with a spotlight on the winner.
- A strategy slide for a launch video where the brand point must visibly separate from the pack.

## Don't use when
- You compare against one rival across several attributes — use `radar-compare`.
- You need competitors ranked on a single measure — use `rank-climb`.
- You want a numeric before-and-after across many rows — use `dumbbell-shift`.