∞ forever components

Business Graphics

Funnel Analysis

Interactive conversions funnel stage chart with flow particles reacting to mouse hover.

canvasmedium complexitymoderate motionhover

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Marketing analytics, sales conversion dashboards, SaaS business metric headers.

When not to

UIs requiring extremely simple/flat styles, light-background layouts without restyling variables.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change the funnel stages count to 3 by editing the funnelData array, or update the accent color by replacing --teal in CSS. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • funnel stages count and values (funnelData array)
  • colors in CSS variables (--teal, --violet, --amber)
  • particle count (maxParticles=75)
  • funnel stage width (min(100%, 280px))
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • visibilitychange pause/resume
  • prefers-reduced-motion check
  • IIFE wrapper
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Particles flow strictly top-to-bottom and don't curve around the stage edges dynamically
  • Tooltip positioning is computed relative to stage elements

funnelconversionscanvasparticlesinteractivegradient3ddashboarddataviz

More Business Graphics components

  • Grid MonitorSystem health grid monitoring status of 30 nodes with active scanning sweeps and interactive detail pane.
  • KPI SparklineKPI metric cards featuring interactive, scrubbable sparkline trends on HTML5 canvas with custom tooltip tracking.
  • KPI Stat RowFour SaaS metric cards — MRR, active users, churn, net revenue retention — with count-up values, colored delta chips and trend arrows, updating with…
  • Activity FeedA live workspace audit stream: new events slide and fade in at the top with a colored initials avatar, an actor, an action (approved invoice, deployed…