Quadrant Plot

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

Installation

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

Props7

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

xLabels[string, string]
Low and high ends of the horizontal axis, left then right.
Default["Slow", "Fast"]
yLabels[string, string]
Low and high ends of the vertical axis, bottom then top.
Default["Hard", "Easy"]
pointsQuadrantPoint[]
Competitor dots: label plus x and y from 0 to 1.
DefaultDEFAULT_POINTS
brandQuadrantPoint
The hero marker that lands last, with label and x, y from 0 to 1.
DefaultDEFAULT_BRAND
accentstring
Colour of the brand marker before the spotlight wash.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark.
Default"dark"
speednumber
Playback speed multiplier; 1 is the designed pace.
Default1