) } export NumberTickerDemo `,__src__:"registry/miami/examples/number-ticker-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" NumberTicker"}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"~/components/ui/number-ticker"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" NumberTickerDemo"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#9945FF"},children:"NumberTicker"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"100"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"} />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" NumberTickerDemo"})]})]})})}),(0,n.jsx)(l.figure,{__src__:"registry/default/examples/number-ticker-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"lumos-dark",__rawString__:`import NumberTicker from "~/components/ui/number-ticker" function NumberTickerDemo() { return (

) } export NumberTickerDemo `,__src__:"registry/default/examples/number-ticker-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" NumberTicker"}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"~/components/ui/number-ticker"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" NumberTickerDemo"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#9945FF"},children:"NumberTicker"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"100"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"} />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" NumberTickerDemo"})]})]})})})]}),` `,(0,n.jsxs)(l.h3,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(d,{defaultValue:"cli",children:[(0,n.jsxs)(F,{children:[(0,n.jsx)(t,{value:"cli",children:"CLI"}),(0,n.jsx)(t,{value:"manual",children:"Manual"})]}),(0,n.jsx)(i,{value:"cli",children:(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"bash","data-theme":"lumos-dark",__rawString__:`npx nyxb@latest add number-ticker `,__npmCommand__:`npx nyxb@latest add number-ticker `,__yarnCommand__:`npx nyxb@latest add number-ticker `,__pnpmCommand__:`pnpm dlx nyxb@latest add number-ticker `,__bunCommand__:`bunx --bun nyxb@latest add number-ticker `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"lumos-dark",style:{display:"grid"},children:(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"npx"}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:" nyxb@latest"}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:" add"}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:" number-ticker"})]})})})})}),(0,n.jsx)(i,{value:"manual",children:(0,n.jsxs)(s,{children:[(0,n.jsx)(l.p,{children:"Copy and paste the following code into your project."}),(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"text","data-theme":"lumos-dark",__rawString__:`components/ui/number-ticker.tsx `,children:(0,n.jsx)(l.code,{"data-language":"text","data-theme":"lumos-dark",style:{display:"grid"},children:(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{children:"components/ui/number-ticker.tsx"})})})})}),(0,n.jsxs)(o,{name:"number-ticker",children:[(0,n.jsx)(l.figure,{__src__:"registry/miami/ui/number-ticker.tsx",__style__:"miami","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"lumos-dark",__rawString__:`"use client" import { useInView, useMotionValue, useSpring } from "framer-motion" import { useEffect, useRef } from "react" import { ny } from "~/lib/utils" export function NumberTicker({ value, direction = "up", delay = 0, className, }: { value: number direction?: "up" | "down" className?: string delay?: number // delay in s }) { const ref = useRef(null) const motionValue = useMotionValue(direction === "down" ? value : 0) const springValue = useSpring(motionValue, { damping: 60, stiffness: 100, }) const isInView = useInView(ref, { once: true, margin: "0px" }) useEffect(() => { isInView && setTimeout(() => { motionValue.set(direction === "down" ? 0 : value) }, delay * 1000) }, [motionValue, isInView, delay, value, direction]) useEffect( () => springValue.on("change", (latest) => { if (ref.current) { ref.current.textContent = Intl.NumberFormat("en-US").format( Math.round(latest), ) } }), [springValue], ) return ( ) } `,__src__:"registry/miami/ui/number-ticker.tsx",__style__:"miami",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"use client"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"useInView"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"useMotionValue"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"useSpring"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"framer-motion"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"useRef"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"react"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"ny"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"~/lib/utils"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" NumberTicker"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" direction"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"up"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" delay"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#CCFF00"},children:" number"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" direction"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"up"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"down"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#CCFF00"},children:" string"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" delay"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#CCFF00"},children:" number"}),(0,n.jsx)(l.span,{style:{color:"#758575DD"},children:" // delay in s"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}) {"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" useRef"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#CCFF00"},children:"HTMLSpanElement"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:")"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" motionValue"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" useMotionValue"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"direction"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ==="}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"down"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ?"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" :"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:")"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" springValue"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" useSpring"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"motionValue"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9945FF"},children:" damping:"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" 60"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9945FF"},children:" stiffness:"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" 100"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" })"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" isInView"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" useInView"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", { "}),(0,n.jsx)(l.span,{style:{color:"#9945FF"},children:"once:"}),(0,n.jsx)(l.span,{style:{color:"#FF078A"},children:" true"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#9945FF"},children:"margin:"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"0px"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" })"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" useEffect"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" isInView"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" &&"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" setTimeout"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" motionValue"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"set"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"direction"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ==="}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"down"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ?"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" :"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:")"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"delay"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" *"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" 1000"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:")"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" }, ["}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"motionValue"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"isInView"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"delay"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"direction"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"])"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" useEffect"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"=>"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" springValue"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"on"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"change"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", ("}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"latest"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"textContent"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" Intl"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"NumberFormat"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"en-US"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:")."}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"format"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" Math"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"round"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"latest"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"),"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" }"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" }),"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"springValue"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"],"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"span"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"ny"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"inline-block tabular-nums tracking-wider text-black dark:text-white"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})})]})})}),(0,n.jsx)(l.figure,{__src__:"registry/default/ui/number-ticker.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"lumos-dark",__rawString__:`"use client" import { useInView, useMotionValue, useSpring } from "framer-motion" import { useEffect, useRef } from "react" import { ny } from "~/lib/utils" export function NumberTicker({ value, direction = "up", delay = 0, className, }: { value: number direction?: "up" | "down" className?: string delay?: number // delay in s }) { const ref = useRef(null) const motionValue = useMotionValue(direction === "down" ? value : 0) const springValue = useSpring(motionValue, { damping: 60, stiffness: 100, }) const isInView = useInView(ref, { once: true, margin: "0px" }) useEffect(() => { isInView && setTimeout(() => { motionValue.set(direction === "down" ? 0 : value) }, delay * 1000) }, [motionValue, isInView, delay, value, direction]) useEffect( () => springValue.on("change", (latest) => { if (ref.current) { ref.current.textContent = Intl.NumberFormat("en-US").format( Math.round(latest), ) } }), [springValue], ) return ( ) } `,__src__:"registry/default/ui/number-ticker.tsx",__style__:"default",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"use client"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"useInView"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"useMotionValue"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"useSpring"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"framer-motion"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"useRef"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"react"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"ny"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"~/lib/utils"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" NumberTicker"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" direction"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"up"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" delay"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#CCFF00"},children:" number"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" direction"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"up"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"down"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#CCFF00"},children:" string"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" delay"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#CCFF00"},children:" number"}),(0,n.jsx)(l.span,{style:{color:"#758575DD"},children:" // delay in s"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}) {"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" useRef"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#CCFF00"},children:"HTMLSpanElement"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:")"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" motionValue"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" useMotionValue"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"direction"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ==="}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"down"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ?"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" :"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:")"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" springValue"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" useSpring"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"motionValue"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9945FF"},children:" damping:"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" 60"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9945FF"},children:" stiffness:"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" 100"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" })"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" isInView"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" useInView"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", { "}),(0,n.jsx)(l.span,{style:{color:"#9945FF"},children:"once:"}),(0,n.jsx)(l.span,{style:{color:"#FF078A"},children:" true"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#9945FF"},children:"margin:"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"0px"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" })"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" useEffect"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" isInView"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" &&"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" setTimeout"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" motionValue"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"set"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"direction"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ==="}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"down"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ?"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" :"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:")"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"delay"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" *"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" 1000"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:")"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" }, ["}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"motionValue"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"isInView"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"delay"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"direction"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"])"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:" useEffect"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"=>"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" springValue"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"on"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"change"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", ("}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"latest"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"textContent"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" Intl"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"NumberFormat"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"en-US"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:")."}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"format"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" Math"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"round"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"latest"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"),"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" }"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" }),"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"springValue"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"],"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#14F195"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#14F195"},children:"span"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FEE75C"},children:"ny"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#FF9900"},children:"inline-block tabular-nums tracking-wider text-black dark:text-white"}),(0,n.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#00FFFF"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})})]})})})]})]})})]}),` `,(0,n.jsxs)(l.h2,{id:"props",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:"Prop"}),(0,n.jsx)(l.th,{children:"Type"}),(0,n.jsx)(l.th,{children:"Description"}),(0,n.jsx)(l.th,{children:"Default"})]})}),(0,n.jsxs)(l.tbody,{children:[(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"value"}),(0,n.jsx)(l.td,{children:"int"}),(0,n.jsx)(l.td,{children:"The value to count to"}),(0,n.jsx)(l.td,{children:"0"})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"direction"}),(0,n.jsx)(l.td,{children:"up | down"}),(0,n.jsx)(l.td,{children:"The direction to count in"}),(0,n.jsx)(l.td,{children:"up"})]})]})]})]})}function D(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(E,{...e})}):E(e)}function c(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return _(k);})(); ;return Component;

Prop	Type	Description	Default
value	int	The value to count to	0
direction	up \| down	The direction to count in	up

Number Ticker

Installation

Props