Fancy Basic Number Ticker Demo

1"use client"
2 
3import { useEffect, useRef } from "react"
4import {
5  Activity,
6  ArrowDownRight,
7  DollarSign,
8  LucideIcon,
9  TrendingUp,
10  Zap,
11} from "lucide-react"
12import { motion, useInView } from "motion/react"
13 
14import NumberTicker, {
15  NumberTickerRef,
16} from "@/components/fancy/text/basic-number-ticker"
17 
18const cards = [
19  {
20    title: "Revenue",
21    icon: DollarSign,
22    from: 0,
23    target: 1250321,
24    prefix: "$",
25    suffix: "",
26    gradient: "from-gray-100 to-blue-400",
27    size: "large",
28  },
29  {
30    title: "Conversion Rate",
31    icon: TrendingUp,
32    from: 0,
33    target: 12.5,
34    prefix: "",
35    suffix: "%",
36    gradient: "from-gray-100 to-purple-200",
37    size: "small",
38  },
39  {
40    title: "Bounce Rate",
41    icon: ArrowDownRight,
42    from: 100,
43    target: 35.8,
44    prefix: "",
45    suffix: "%",
46    gradient: "from-gray-100 to-orange-200",
47    size: "small",
48  },
49  {
50    title: "Avg. Session Duration",
51    icon: Zap,
52    from: 0,
53    target: 245,
54    prefix: "",
55    suffix: "s",
56    gradient: "from-gray-100 to-purple-200",
57    size: "small",
58  },
59  {
60    title: "New Users",
61    icon: TrendingUp,
62    from: 0,
63    target: 15420,
64    prefix: "",
65    suffix: "",
66    gradient: "from-gray-100 to-orange-200",
67    size: "small",
68  },
69  {
70    title: "Active Users",
71    icon: Activity,
72    from: 0,
73    target: 8750,
74    prefix: "",
75    suffix: "",
76    gradient: "from-gray-100 to-blue-200",
77    size: "small",
78  },
79]
80 
81interface CardProps {
82  title: string
83  icon: LucideIcon
84  from: number
85  target: number
86  prefix: string
87  suffix: string
88  gradient: string
89  size: string
90}
91 
92const Card = ({ card, index }: { card: CardProps; index: number }) => {
93  const cardRef = useRef<HTMLDivElement>(null)
94  const tickerRef = useRef<NumberTickerRef>(null)
95  const inView = useInView(cardRef, { once: false })
96 
97  useEffect(() => {
98    if (inView) {
99      tickerRef.current?.startAnimation()
100    }
101  }, [inView])
102 
103  return (
104    <motion.div
105      ref={cardRef}
106      initial={{ opacity: 0, y: 10 }}
107      animate={{ opacity: 1, y: 0 }}
108      transition={{ duration: 0.5, delay: index * 0.1 }}
109      className={`p-6 bg-linear-to-b from-50% to-130% flex justify-between flex-col text-foreground dark:text-muted ${
110        card.gradient
111      } ${card.size === "large" ? "col-span-2 row-span-2" : ""}`}
112    >
113      <div className="flex justify-between items-center mb-4">
114        <h3 className="text-xs md:text-sm">{card.title}</h3>
115        <card.icon className={`h-4 w-4`} />
116// … truncated