Funnel Chart

An animated funnel chart with multi-layer halo rings, hover interactions, and staggered entrance animations

Installation

terminal

pnpm dlx layro-cli add @bklit/funnel-chart

npx layro-cli add @bklit/funnel-chart

npx layro-cli add @bklit/funnel-chart

bunx layro-cli add @bklit/funnel-chart

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import type { Transition } from "motion/react";
import { domAnimation, LazyMotion, m, useTransform } from "motion/react";
import {
  type CSSProperties,
  type ReactNode,
  useCallback,
  useEffect,
  useRef,
  useState,
} from "react";
import { cn } from "@/lib/utils";
import { useEnterComplete } from "./use-enter-complete";