Funnel chart component

A funnel blooms stage by stage as the camera moves down it and each number counts up.

$npx kinetograph add funnel-chart

Props

Every prop has a default, so the component renders as it is. Change any of them in Studio or in code.

data
list
The stages, widest first.
title
string = "Signup funnel"
Heading.
subtitle
string = "Visitors to paying customers, last 90 days"
Muted line under the heading.
mode
light | dark = "light"
Colour theme: light or dark.
palette
primary | monochrome | ocean | sunset | grove | vivid = "primary"
Chart palette: primary (indigo, yellow, fuchsia, mist, black), monochrome, ocean, sunset, grove or vivid.
color
integer = 0
Which palette colour (0 to 4) the funnel is drawn in.
layers
integer = 3
Halo rings per stage.
gap
number = 8
Gap between stages in pixels.
stageSeconds
number = 1.45
Time on each stage: the dolly in and the hold.
holdSeconds
number = 1.8
How long the last frame holds.
camera.tightZoom
number = 1.3
Zoom while on a stage.
camera.wideZoom
number = 1
Zoom of the whole funnel.
camera.motionBlur
number = 1
Strength of the motion blur on the fast moves; 0 turns it off.
camera.rackFocus
number = 4
Blur in pixels on the stages beside the one in frame.