Stacked Shift

A stacked share bar shifts over the years until the logo series reaches 52%

Installation

$ pnpm dlx shadcn@latest add @remocn/stacked-shift

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { StackedShift } from "@/components/remocn/stacked-shift";
 
const StackedShiftScene = () => (
  <StackedShift
    years={["2023", "2024", "2025"]}
    caption="of launch videos"
    series={[
      { label: "remocn", values: [6, 24, 52] },
      { label: "Kitebase", values: [34, 28, 18] },
      { label: "Other", values: [60, 48, 30] },
    ]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="StackedShift"
    component={StackedShiftScene}
    durationInFrames={178}
    fps={30}
    width={1280}
    height={720}
  />
);

One stacked share bar shifts from year to year, the segments sliding to new sizes with the year label changing, until the highlighted series reaches its final share and its caption lands. Pass series (label and one value per year), years, highlight and caption. Ships dark and light via theme.

Props7

Prop	Type	Default
series	StackedSeries[]DEFAULT_SERIES Series stacked in the bar, each with one value per year.
years	string[]DEFAULT_YEARS Year labels, one per value in each series.
highlight	number0 Index of the series that gets the gradient.
caption	string"of launch videos" Line under the final share.
accent	string"#3B5BFD" Accent color for the hero element.
theme	"dark" \| "light""dark" Dark or light palette.
speed	number1 Playback multiplier.

seriesStackedSeries[]
Series stacked in the bar, each with one value per year.
DefaultDEFAULT_SERIES
yearsstring[]
Year labels, one per value in each series.
DefaultDEFAULT_YEARS
highlightnumber
Index of the series that gets the gradient.
Default0
captionstring
Line under the final share.
Default"of launch videos"
accentstring
Accent color for the hero element.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette.
Default"dark"
speednumber
Playback multiplier.
Default1