# Stacked Shift
URL: https://remocn.dev/docs/numbers/stacked-shift

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

- Install: `npx shadcn@latest add @remocn/stacked-shift`
- Vibe: data
- Natural length: 150f @ 30fps

## Installation

```bash
npx 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`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `0` | 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` | `number` | `1` | Playback multiplier. |

## Use when
- A market-share story across years where one series grows until it leads, such as 52%.
- A beat showing adoption shifting from competitors to you over three or more periods.
- A single stacked bar that morphs between periods instead of one chart per year.

## Don't use when
- You only have one moment in time — use `share-donut`.
- You want a flowing layered area over time — use `streamgraph`.
- You want two time points with a line per item — use `slope-chart`.