"use client" import { useEffect, useRef } from "react" import { Activity, ArrowDownRight, DollarSign, LucideIcon, TrendingUp, Zap, } from "lucide-react" import { motion, useInView } from "motion/react" import NumberTicker, { NumberTickerRef, } from "@/components/fancy/text/basic-number-ticker" const cards = [ { title: "Revenue", icon: DollarSign, from: 0, target: 1250321, prefix: "$", suffix: "", gradient: "from-gray-100 to-blue-400", size: "large", }, { title: "Conversion Rate", icon: TrendingUp, from: 0, target: 12.5, prefix: "", suffix: "%", gradient: "from-gray-100 to-purple-200", size: "small", }, { title: "Bounce Rate", icon: ArrowDownRight, from: 100, target: 35.8, prefix: "", suffix: "%", gradient: "from-gray-100 to-orange-200", size: "small", }, { title: "Avg. Session Duration", icon: Zap, from: 0, target: 245, prefix: "", suffix: "s", gradient: "from-gray-100 to-purple-200", size: "small", }, { title: "New Users", icon: TrendingUp, from: 0, target: 15420, prefix: "", suffix: "", gradient: "from-gray-100 to-orange-200", size: "small", }, { title: "Active Users", icon: Activity, from: 0, target: 8750, prefix: "", suffix: "", gradient: "from-gray-100 to-blue-200", size: "small", }, ] interface CardProps { title: string icon: LucideIcon from: number target: number prefix: string suffix: string gradient: string size: string } const Card = ({ card, index }: { card: CardProps; index: number }) => { const cardRef = useRef(null) const tickerRef = useRef(null) const inView = useInView(cardRef, { once: false }) useEffect(() => { if (inView) { tickerRef.current?.startAnimation() } }, [inView]) return (

{card.title}

{card.prefix} {card.suffix}

) } export default function FancyNumberTickerDemo() { return (

{cards.map((card, index) => ( ))}

) }

Fancy Basic Number Ticker Demo

Instalação

Dependências

Registry dependencies