) } export NumberTickerDemo `,__src__:"registry/default/example/number-ticker-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" NumberTicker "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'~/components/ui/number-ticker'"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"NumberTickerDemo"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"NumberTicker"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" NumberTickerDemo"})]})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import NumberTicker from '~/components/ui/number-ticker' function NumberTickerDemo() { return (

) } export NumberTickerDemo `,__src__:"registry/miami/example/number-ticker-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" NumberTicker "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'~/components/ui/number-ticker'"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"NumberTickerDemo"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"NumberTicker"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" NumberTickerDemo"})]})]})})})]}),` `,(0,e.jsxs)(l.h3,{id:"installation",children:[(0,e.jsx)(l.a,{className:"anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(o,{defaultValue:"cli",children:[(0,e.jsxs)(r,{children:[(0,e.jsx)(i,{value:"cli",children:"CLI"}),(0,e.jsx)(i,{value:"manual",children:"Manual"})]}),(0,e.jsx)(t,{value:"cli",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx nyxbui@latest add number-ticker `,__npmCommand__:`npx nyxbui@latest add number-ticker `,__yarnCommand__:`npx nyxbui@latest add number-ticker `,__pnpmCommand__:`pnpm dlx nyxbui@latest add number-ticker `,__bunCommand__:`bun x --bun nyxbui@latest add number-ticker `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"npx"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"nyxbui@latest"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"add"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"number-ticker"})]})})})})}),(0,e.jsx)(t,{value:"manual",children:(0,e.jsxs)(E,{children:[(0,e.jsx)(l.p,{children:"Copy and paste the following code into your project."}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"text","data-theme":"default",__rawString__:`components/ui/number-ticker.tsx `,children:(0,e.jsx)(l.code,{"data-language":"text","data-theme":"default",children:(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#e1e4e8"},children:"components/ui/number-ticker.tsx"})})})})}),(0,e.jsxs)(d,{name:"number-ticker",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__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( latest.toFixed(0), ) } }), [springValue], ) return ( ) } `,__src__:"registry/default/ui/number-ticker.tsx",__style__:"default",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useInView, useMotionValue, useSpring } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'framer-motion'"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useEffect, useRef } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'~/lib/utils'"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"NumberTicker"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'up'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"delay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"number"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'up'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'down'"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"delay"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// delay in s"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}) {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"HTMLSpanElement"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"motionValue"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useMotionValue"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(direction "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'down'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"springValue"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useSpring"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(motionValue, {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" damping: "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"60"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" stiffness: "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"isInView"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useInView"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(ref, { once: "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", margin: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'0px'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" })"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" isInView"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"setTimeout"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" motionValue."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"set"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(direction "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'down'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, delay "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"1000"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, [motionValue, isInView, delay, value, direction])"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" springValue."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"on"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'change'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", ("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"latest"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (ref.current) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ref.current.textContent "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Intl."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"NumberFormat"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'en-US'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"format"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" latest."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"toFixed"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" [springValue],"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"ny"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'inline-block tabular-nums tracking-wider text-black dark:text-white'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" className,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__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( latest.toFixed(0), ) } }), [springValue], ) return ( ) } `,__src__:"registry/miami/ui/number-ticker.tsx",__style__:"miami",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useInView, useMotionValue, useSpring } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'framer-motion'"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useEffect, useRef } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'~/lib/utils'"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"NumberTicker"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'up'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"delay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"number"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'up'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'down'"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"delay"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// delay in s"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}) {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"HTMLSpanElement"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"motionValue"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useMotionValue"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(direction "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'down'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"springValue"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useSpring"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(motionValue, {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" damping: "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"60"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" stiffness: "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"isInView"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useInView"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(ref, { once: "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", margin: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'0px'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" })"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" isInView"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"setTimeout"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" motionValue."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"set"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(direction "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'down'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" value)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, delay "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"1000"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, [motionValue, isInView, delay, value, direction])"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" springValue."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"on"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'change'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", ("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"latest"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (ref.current) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ref.current.textContent "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Intl."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"NumberFormat"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'en-US'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"format"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" latest."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"toFixed"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" [springValue],"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"ny"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'inline-block tabular-nums tracking-wider text-black dark:text-white'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" className,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]})]})})]}),` `,(0,e.jsxs)(l.h2,{id:"props",children:[(0,e.jsx)(l.a,{className:"anchor","aria-label":"Link to section",href:"#props",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,e.jsxs)(l.table,{children:[(0,e.jsx)(l.thead,{children:(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.th,{children:"Prop"}),(0,e.jsx)(l.th,{children:"Type"}),(0,e.jsx)(l.th,{children:"Description"}),(0,e.jsx)(l.th,{children:"Default"})]})}),(0,e.jsxs)(l.tbody,{children:[(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"value"}),(0,e.jsx)(l.td,{children:"int"}),(0,e.jsx)(l.td,{children:"The value to count to"}),(0,e.jsx)(l.td,{children:"0"})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"direction"}),(0,e.jsx)(l.td,{children:"up | down"}),(0,e.jsx)(l.td,{children:"The direction to count in"}),(0,e.jsx)(l.td,{children:"up"})]})]})]})]})}function w(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(m,n)})):m(n)}var V=w;function c(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return k(C);})(); ;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