# Analytics Funnel
URL: https://remocn.dev/docs/product-scenes/analytics-funnel

An activation funnel chart steps down while a tooltip shows breakdowns

- Install: `npx shadcn@latest add @remocn/analytics-funnel`
- Vibe: data
- Natural length: 125f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/analytics-funnel
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { AnalyticsFunnel } from "@/components/remocn/analytics-funnel";

const AnalyticsFunnelScene = () => (
  <AnalyticsFunnel
    title="Activation funnel"
    variantLabel="New onboarding"
    tooltipStep={2}
    theme="dark"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="AnalyticsFunnel"
    component={AnalyticsFunnelScene}
    durationInFrames={165}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A funnel chart window grows its bars step by step, then a cursor clicks a variant toggle and the bars morph from control to variant with an uplift badge. A tooltip then opens on one step with a breakdown. Pass your own `steps` (control and variant counts), `title` and `breakdown`. It ships light and dark through the `theme` prop.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `steps` | `FunnelStep[]` | `DEFAULT_STEPS` | Funnel steps with label, event name, and control and variant counts. |
| `title` | `string` | `"Activation funnel"` | Chart title in the window header. |
| `variantLabel` | `string` | `"New onboarding"` | Label of the variant toggle the cursor clicks. |
| `tooltipStep` | `number` | `2` | Zero-based index of the step that gets the tooltip. |
| `breakdown` | `FunnelBreakdownRow[]` | `DEFAULT_BREAKDOWN` | Tooltip rows: a label and its share from 0 to 1. |
| `dateRange` | `string` | `"Last 30 days"` | Date range label shown in the header. |
| `theme` | `"light" \| "dark"` | `"light"` | Light or dark window styling. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the variant bars and toggle. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `ground` | `GshPresetId` | — | Gradient shader preset id for the background. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader preset parameters. |

## Use when
- An analytics or growth product launch that needs to show a conversion funnel with real-looking drop-off per step.
- An experiment beat where a cursor flips a toggle and the bars morph from the control to the new variant, with an uplift badge.
- A feature video that ends on a tooltip with a per-platform breakdown of one funnel step.

## Don't use when
- You want a single chart line growing to a headline value — use `chart-morph` instead.
- The story is a live revenue dashboard with a feed, not a funnel — use `live-dashboard` instead.
- You only need big count-up numbers with no chart — use `stat-sequence` instead.