Slope Chart

A slope chart draws before/after lines, the hero line rising to a 6.8x stat

Installation

$ pnpm dlx shadcn@latest add @remocn/slope-chart

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SlopeChart } from "@/components/remocn/slope-chart";
 
const SlopeChartScene = () => (
  <SlopeChart
    highlight={{ before: 6, after: 41 }}
    value="6.8×"
    label="more launch videos shipped"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SlopeChart"
    component={SlopeChartScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Grey lines draw between a before and an after axis, then the hero line starts low, climbs steeply with a dot and ring, and the multiplier stat and label land. Pass lines for the grey context, highlight for the hero line, and value, label, beforeLabel and afterLabel. Ships dark and light via theme.

Props9

Prop	Type	Default
lines	SlopeLine[]DEFAULT_LINES Grey context lines, each with a before and after value.
highlight	SlopeLineDEFAULT_HIGHLIGHT The hero line with before and after values.
value	string"6.8×" The hero stat that lands, such as 6.8x.
label	string"more launch videos shipped" Line under the hero stat.
beforeLabel	string"Before" Heading over the before axis.
afterLabel	string"After" Heading over the after axis.
accent	string"#3B5BFD" Accent color for the hero element.
speed	number1 Playback multiplier.
theme	"dark" \| "light""dark" Dark or light palette.

linesSlopeLine[]
Grey context lines, each with a before and after value.
DefaultDEFAULT_LINES
highlightSlopeLine
The hero line with before and after values.
DefaultDEFAULT_HIGHLIGHT
valuestring
The hero stat that lands, such as 6.8x.
Default"6.8×"
labelstring
Line under the hero stat.
Default"more launch videos shipped"
beforeLabelstring
Heading over the before axis.
Default"Before"
afterLabelstring
Heading over the after axis.
Default"After"
accentstring
Accent color for the hero element.
Default"#3B5BFD"
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Dark or light palette.
Default"dark"