Skip to content
Get Pro
Composition

Funnel

Stages as one stream that narrows from step to step.

$149 once · every Pro piece

Customize

Each stage is a solid core inside lighter halo rings, and the share that fell away between two stages is left behind as a hatched ghost of the previous width: hatch means lost. Conversion pills sit on faint dividers that fade at both ends. On mount the stages land one after another on springs, cores first and halos a beat later. Point at a stage, or Tab in and use the arrow keys: it runs hot, the rest step back, a panel gives the count, share of entry and drop, and the readout rolls from overall conversion to that stage. Horizontal or vertical, curved or straight edges, zero to two halos.

Install

npx shadcn@latest add @obsyde/funnel

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Funnel } from '@/components/obsyde/ember/funnel/Funnel';

export function Example() {
  return (
    <Funnel
      orientation="horizontal"
      halos={2}
      edges="curved"
      pattern="diagonal-up"
    />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/funnel/Funnel.tsxcomponent
  • ember/funnel/funnel.cssstyles
  • ember/funnel/FunnelDemo.tsxdemo
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/Tooltip.tsxshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/roll.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/viz-kit/chart.tsxshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/state-messages.tsxshared
  • ember/viz-kit/stage.tsxshared
  • ember/viz-kit/stage.cssshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
orientationOrientation'horizontal' | 'vertical''horizontal'
stagesStagesnumber5
halosHalosnumber2
edgesEdges'curved' | 'straight''curved'
patternPattern'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch''diagonal-up'
conversionConversion pillsbooleantrue
tooltipTooltip'panel' | 'none''panel'
statusStatus'ready' | 'loading' | 'empty''ready'
heightHeightnumber260
seedSeednumber2