Funnel Steps

Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.

• Stages *

  stages · array

  The funnel, widest first. Order is the argument: the bands narrow downward in exactly this order and no sorting is applied, so a stage larger than the one above it reads as a gain (+%) rather than a drop. Four stages is the sweet spot; six is the ceiling before the bands thin out.

  now: 4 items

• Title

  title · string

  Headline above the funnel, in the display face. Name the population being funnelled ('Trial to paid, last 30 days'), not the shape ('Our funnel'). One line reads best.

  now: Trial to paid, last 30 days

• Eyebrow

  eyebrow · string

  Small uppercase mono label in the accent colour above the title. Omit for a barer frame.

  now: Conversion

• Summary label

  summaryLabel · string

  Label for the end-to-end conversion figure in the top right, which counts up to last ÷ first as the funnel builds. Omit the label to drop that figure entirely and let the bands carry the story.

  now: End to end

• Dropoff

  dropoff · "percent" | "count" | "both" | "none"

  What the muted annotation beside each band says about the step above it: 'percent' the share lost, 'count' the absolute number lost, 'both' stacks the two, 'none' hides the annotation and re-centres the funnel in the frame.

  now: percent

• Min width

  minWidth · number

  Width the smallest band keeps as a fraction of the widest, so the last stage stays legible when its count is a rounding error of the first. It flatters small stages: 0 makes the widths strictly proportional and honest, 0.4 keeps a real funnel silhouette.

  now: 0.4

• Value prefix

  valuePrefix · string

  Set immediately before every figure, on the bands and the drop-off alike, a currency mark such as '$' or '€'.

• Value suffix

  valueSuffix · string

  Set immediately after every figure: 'MRR', 'sessions', 'k'. Rendered exactly as typed, so include a leading thin space yourself if the unit needs air.

• Compact

  compact · boolean

  Abbreviate thousands and millions ('1.2k', '3.4M') instead of grouping digits with thin spaces. Grouped digits are more precise and read better in a band; switch this on once the figures pass six digits.

  now: false

• Footnote

  footnote · string

  Quiet mono caption under a hairline at the foot of the frame: the source, the window, the qualifier. One short sentence.

  now: Self-serve signups only · activation means one workspace …

• Brand

  brand · string

  Brand token id, one of the keys of BRANDS.

  now: slate