Radar Compare

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

Installation

$ pnpm dlx 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.

Props9

Prop	Type	Default
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	number1 Playback speed multiplier; 1 is the designed pace.

axesstring[]
Axis names around the radar. Up to eight are used, minimum three.
DefaultDEFAULT_AXES
competitornumber[]
Competitor values from 0 to 1, one per axis.
DefaultDEFAULT_COMPETITOR
brandnumber[]
Brand values from 0 to 1, one per axis.
DefaultDEFAULT_BRAND
brandLabelstring
Name of your product in the side panel.
Default"remocn"
competitorLabelstring
Name of the competitor in the side panel.
Default"Kitebase"
captionstring
Optional line of text under the names.
accentstring
Highlight colour of the brand polygon.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark.
Default"dark"
speednumber
Playback speed multiplier; 1 is the designed pace.
Default1