Basic Number Ticker Demo

PreviousNext

A block component.

Docs
fancyblock

Preview

Loading preview…
examples/text/basic-number-ticker-demo.tsx
import NumberTicker from "@/components/fancy/text/basic-number-ticker"

const NumberTickerDemo = () => {
  return (
    <div className="p-10 flex w-dvw h-dvh justify-center items-center bg-white">
      <p className="w-full text-7xl md:text-9xl flex justify-center font-azeret-mono text-[#1f464d]">
        <NumberTicker
          from={0}
          target={100}
          autoStart={true}
          transition={{ duration: 3.5, type: "tween", ease: "easeInOut" }}
          onComplete={() => console.log("complete")}
          onStart={() => console.log("start")}
        />
        %
      </p>
    </div>
  )
}

export default NumberTickerDemo

Installation

npx shadcn@latest add @fancy/basic-number-ticker-demo

Usage

import { BasicNumberTickerDemo } from "@/components/basic-number-ticker-demo"
<BasicNumberTickerDemo />