Funnel Chart
Stage bars narrowing with drop-off percentages. Install with npx remotion-ui@latest add funnel-chart.
PrimitiveData & media
$ npx remotion-ui@latest add funnel-chartStage bands narrowing toward the bottom, with the loss between each pair printed alongside.
import { FunnelChart } from "@/remotion/primitives/funnel-chart";
<FunnelChart
stages={[
{ label: "Visited docs", value: 42800 },
{ label: "Ran the CLI", value: 18600 },
{ label: "Shipped it", value: 1750 },
]}
staggerInFrames={15}
/>The taper is the number
Each band runs from its own width down to the next stage's width, so the shape carries the drop before anyone reads a label. The last band is a rectangle: there is no next stage to taper to, and inventing one would overstate the final step.
Why the labels sit outside
Names and values live in a left gutter, not inside the bands. A real funnel ends
narrow, and type set inside the last band would either overflow it or shrink
until it was unreadable — which is usually where the interesting number is.
labelWidth sizes that gutter; drop-off chips get their own on the right.
Timing
Bands wipe downward in order. Each drop-off chip waits for the band below it, because the chip is a claim about two stages and cannot land before both exist.
With exitAtInFrames the funnel drains bottom-up, narrow end first.
Each band tapers from its own width to the next stage's, so the shape carries the loss before a label is read; the last band is a rectangle because there is no next stage to taper to. Names and values sit in a left gutter — a real funnel ends narrow, and type inside the last band would have to shrink until it was unreadable.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/funnel-chart- Use when: data stories, metrics, charts, and numeric proof points.
- Customize: stages, width, height, gap, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { FunnelChart } from "@/remotion/primitives/funnel-chart";
<FunnelChart
stages={[
{ label: "Visited docs", value: 42800 },
{ label: "Ran the CLI", value: 18600 },
{ label: "Shipped it", value: 1750 },
]}
staggerInFrames={15}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| stages | FunnelStage[] | required | `{ label, value, color? }`, top to bottom. |
| width | number | 820 | Overall width: label gutter, funnel and drop-off gutter. |
| height | number | 420 | Overall height. Bands split it evenly. |
| gap | number | 10 | Space between bands. |
| tailOpacity | number | 0.5 | Opacity of the last band; earlier bands ramp toward 1. |
| labelWidth | number | 30% of width | Left gutter holding stage names and values. |
| showDropoff | boolean | true | Drop-off chip between consecutive stages. |
| showConversion | boolean | false | Share of the first stage, printed beside each value. |
| durationInFrames | number | 22 | Length of one band's wipe. |
| staggerInFrames | number | 12 | Frames between one band and the next. |
| exitAtInFrames | number | undefined | Frame the funnel drains on, narrow end first. |
| frame | number | undefined | Frame override — pass the parent frame inside a `<Sequence>`. |