First funnel
A visitor walks the path, and each step's bar fills a little shorter.
Not quite it? Ask for a variation
Install
Writes one React component into components/illos. Nothing else to install.
npx shadcn@latest add https://illos.dev/r/flat/first-funnel.jsonOr hand it to your agent
Claude Code, Cursor, Codex and any other coding agent can add it from the prompt.
How it moves
- three steps sit on one path: a page, an event and a goal.
- a visitor moves down the path, one step at a time.
- each step's bar fills as they arrive, shorter at every step.
Where it fits
For product analytics and growth tools: the funnels page before any funnel exists, a features card on conversion, or the docs page on building a funnel. One visitor walking a page, an event and a goal, with each bar filling shorter than the last, explains what a funnel measures before anyone has built one. As a spot it fits above the heading and a Create funnel button. It is free to copy and pairs with First goal, Analytics funnel and Requests chart.
Pairs well with First goal, Analytics funnel and Requests chart.
On your site
Read where product illustrations go, how to place an animated SVG and how to keep animations fast.
For developers
- File size
- 2.4 KB gzipped
- Motion
- Plays once, 4.3 s, then holds
- Reduced motion
- Shows a still
- File
- first-funnel.svg