Ridgeline

Stacked ridgeline distributions per year, the latest one lit in gradient with a 2.6x stat

Installation

$ pnpm dlx shadcn@latest add @remocn/ridgeline

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { Ridgeline } from "@/components/remocn/ridgeline";
 
const RidgelineScene = () => (
  <Ridgeline
    labels={["2022", "2023", "2024", "2025"]}
    highlightLabel="With remocn"
    value="2.6×"
    caption="more videos per team"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="Ridgeline"
    component={RidgelineScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Grey ridgelines for each period draw in one after another, then a lit gradient ridge rises to the right and shifts the peak while the multiplier stat and caption land. Pass labels for the period rows, highlightLabel for the lit row, and value, caption, axisLabel and ticks for the text. Ships dark and light via theme.

Props9

Prop	Type	Default
labels	string[]DEFAULT_LABELS Row labels for the grey ridgelines, oldest first.
highlightLabel	string"With remocn" Label on the lit gradient ridge.
value	string"2.6×" The hero stat that lands, such as 2.6x.
caption	string"more videos per team" Line under the hero stat.
axisLabel	string"videos per team, per month" Caption under the x axis.
ticks	string[]DEFAULT_TICKS Tick labels along the x axis.
accent	string"#3B5BFD" Accent color for the hero element.
speed	number1 Playback multiplier.
theme	"dark" \| "light""dark" Dark or light palette.

labelsstring[]
Row labels for the grey ridgelines, oldest first.
DefaultDEFAULT_LABELS
highlightLabelstring
Label on the lit gradient ridge.
Default"With remocn"
valuestring
The hero stat that lands, such as 2.6x.
Default"2.6×"
captionstring
Line under the hero stat.
Default"more videos per team"
axisLabelstring
Caption under the x axis.
Default"videos per team, per month"
ticksstring[]
Tick labels along the x axis.
DefaultDEFAULT_TICKS
accentstring
Accent color for the hero element.
Default"#3B5BFD"
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Dark or light palette.
Default"dark"