51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T2377,'use client'; import * as React from 'react'; import { useSpring, useTransform, motion, useMotionValue, type MotionValue, type SpringOptions, type HTMLMotionProps, } from 'motion/react'; import useMeasure from 'react-use-measure'; import { useIsInView, type UseIsInViewOptions, } from '@/hooks/use-is-in-view'; type SlidingNumberRollerProps = { prevValue: number; value: number; place: number; transition: SpringOptions; delay?: number; }; function SlidingNumberRoller({ prevValue, value, place, transition, delay = 0, }: SlidingNumberRollerProps) { const startNumber = Math.floor(prevValue / place) % 10; const targetNumber = Math.floor(value / place) % 10; const animatedValue = useSpring(startNumber, transition); React.useEffect(() => { const timeoutId = setTimeout(() => { animatedValue.set(targetNumber); }, delay); return () => clearTimeout(timeoutId); }, [targetNumber, animatedValue, delay]); const [measureRef, { height }] = useMeasure(); return ( 0 {Array.from({ length: 10 }, (_, i) => ( ))} ); } type SlidingNumberDisplayProps = { motionValue: MotionValue; number: number; height: number; transition: SpringOptions; }; function SlidingNumberDisplay({ motionValue, number, height, transition, }: SlidingNumberDisplayProps) { const y = useTransform(motionValue, (latest) => { if (!height) return 0; const currentNumber = latest % 10; const offset = (10 + number - currentNumber) % 10; let translateY = offset * height; if (offset > 5) translateY -= 10 * height; return translateY; }); if (!height) { return ( {number} ); } return ( {number} ); } type SlidingNumberProps = Omit, 'children'> & { number: number; fromNumber?: number; onNumberChange?: (number: number) => void; padStart?: boolean; decimalSeparator?: string; decimalPlaces?: number; thousandSeparator?: string; transition?: SpringOptions; delay?: number; initiallyStable?: boolean; } & UseIsInViewOptions; function SlidingNumber({ ref, number, fromNumber, onNumberChange, inView = false, inViewMargin = '0px', inViewOnce = true, padStart = false, decimalSeparator = '.', decimalPlaces = 0, thousandSeparator, transition = { stiffness: 200, damping: 20, mass: 0.4 }, delay = 0, initiallyStable = false, ...props }: SlidingNumberProps) { const { ref: localRef, isInView } = useIsInView( ref as React.Ref, { inView, inViewOnce, inViewMargin, }, ); const initialNumeric = Math.abs(Number(number)); const prevNumberRef = React.useRef( initiallyStable ? initialNumeric : 0, ); const hasAnimated = fromNumber !== undefined; const motionVal = useMotionValue( initiallyStable ? initialNumeric : (fromNumber ?? 0), ); const springVal = useSpring(motionVal, { stiffness: 90, damping: 50 }); const skippedInitialWhenStable = React.useRef(false); React.useEffect(() => { if (!hasAnimated) return; if (initiallyStable && !skippedInitialWhenStable.current) { skippedInitialWhenStable.current = true; return; } const timeoutId = setTimeout(() => { if (isInView) motionVal.set(number); }, delay); return () => clearTimeout(timeoutId); }, [hasAnimated, initiallyStable, isInView, number, motionVal, delay]); const [effectiveNumber, setEffectiveNumber] = React.useState( initiallyStable ? initialNumeric : 0, ); React.useEffect(() => { if (hasAnimated) { const inferredDecimals = typeof decimalPlaces === 'number' && decimalPlaces >= 0 ? decimalPlaces : (() => { const s = String(number); const idx = s.indexOf('.'); return idx >= 0 ? s.length - idx - 1 : 0; })(); const factor = Math.pow(10, inferredDecimals); const unsubscribe = springVal.on('change', (latest: number) => { const newValue = inferredDecimals > 0 ? Math.round(latest * factor) / factor : Math.round(latest); if (effectiveNumber !== newValue) { setEffectiveNumber(newValue); onNumberChange?.(newValue); } }); return () => unsubscribe(); } else { setEffectiveNumber( initiallyStable ? initialNumeric : !isInView ? 0 : initialNumeric, ); } }, [ hasAnimated, springVal, isInView, number, decimalPlaces, onNumberChange, effectiveNumber, initiallyStable, initialNumeric, ]); const formatNumber = React.useCallback( (num: number) => decimalPlaces != null ? num.toFixed(decimalPlaces) : num.toString(), [decimalPlaces], ); const numberStr = formatNumber(effectiveNumber); const [newIntStrRaw, newDecStrRaw = ''] = numberStr.split('.'); const finalIntLength = padStart ? Math.max( Math.floor(Math.abs(number)).toString().length, newIntStrRaw.length, ) : newIntStrRaw.length; const newIntStr = padStart ? newIntStrRaw.padStart(finalIntLength, '0') : newIntStrRaw; const prevFormatted = formatNumber(prevNumberRef.current); const [prevIntStrRaw = '', prevDecStrRaw = ''] = prevFormatted.split('.'); const prevIntStr = padStart ? prevIntStrRaw.padStart(finalIntLength, '0') : prevIntStrRaw; const adjustedPrevInt = React.useMemo(() => { return prevIntStr.length > finalIntLength ? prevIntStr.slice(-finalIntLength) : prevIntStr.padStart(finalIntLength, '0'); }, [prevIntStr, finalIntLength]); const adjustedPrevDec = React.useMemo(() => { if (!newDecStrRaw) return ''; return prevDecStrRaw.length > newDecStrRaw.length ? prevDecStrRaw.slice(0, newDecStrRaw.length) : prevDecStrRaw.padEnd(newDecStrRaw.length, '0'); }, [prevDecStrRaw, newDecStrRaw]); React.useEffect(() => { if (isInView || initiallyStable) { prevNumberRef.current = effectiveNumber; } }, [effectiveNumber, isInView, initiallyStable]); const intPlaces = React.useMemo( () => Array.from({ length: finalIntLength }, (_, i) => Math.pow(10, finalIntLength - i - 1), ), [finalIntLength], ); const decPlaces = React.useMemo( () => newDecStrRaw ? Array.from({ length: newDecStrRaw.length }, (_, i) => Math.pow(10, newDecStrRaw.length - i - 1), ) : [], [newDecStrRaw], ); const newDecValue = newDecStrRaw ? parseInt(newDecStrRaw, 10) : 0; const prevDecValue = adjustedPrevDec ? parseInt(adjustedPrevDec, 10) : 0; return ( {isInView && Number(number) < 0 && ( - )} {intPlaces.map((place, idx) => { const digitsToRight = intPlaces.length - idx - 1; const isSeparatorPosition = typeof thousandSeparator !== 'undefined' && digitsToRight > 0 && digitsToRight % 3 === 0; return ( {isSeparatorPosition && {thousandSeparator}} ); })} {newDecStrRaw && ( <> {decimalSeparator} {decPlaces.map((place) => ( ))} )} ); } export { SlidingNumber, type SlidingNumberProps }; 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}],["$","li","react-use-measure",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/react-use-measure","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"react-use-measure"}]]}]}]]}],["$","$L51",null,{"registryDependencies":["@odysseyui/hooks-use-is-in-view"]}]]}],["$","$L52",null,{"sourceUrl":"https://www.odysseyui.com/r/primitives-texts-sliding-number.json","proxyUrl":"https://shadcnregistry.com/r/odysseyui/primitives-texts-sliding-number","itemId":"@odysseyui/primitives-texts-sliding-number"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/primitives/texts/sliding-number/index.tsx","content":"$54","type":"registry:ui","target":"components/odysseyui/primitives/texts/sliding-number.tsx"}]}]]}],"$L55"]}]

Sliding Number

Installation

Files

components

Styles