Analytics Funnel

An activation funnel chart steps down while a tooltip shows breakdowns

Installation

$ pnpm dlx 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.

Props11

Prop	Type	Default
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	number2 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	number1 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.

stepsFunnelStep[]
Funnel steps with label, event name, and control and variant counts.
DefaultDEFAULT_STEPS
titlestring
Chart title in the window header.
Default"Activation funnel"
variantLabelstring
Label of the variant toggle the cursor clicks.
Default"New onboarding"
tooltipStepnumber
Zero-based index of the step that gets the tooltip.
Default2
breakdownFunnelBreakdownRow[]
Tooltip rows: a label and its share from 0 to 1.
DefaultDEFAULT_BREAKDOWN
dateRangestring
Date range label shown in the header.
Default"Last 30 days"
theme"light" | "dark"
Light or dark window styling.
Default"light"
accentstring
Accent color for the variant bars and toggle.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
groundGshPresetId
Gradient shader preset id for the background.
groundParamsPartial<GradientParams>
Overrides for the shader preset parameters.