"use client"; import { cn } from "@repo/shadcn-ui/lib/utils"; import { useEffect, useRef, useState } from "react"; const STAGGER_DELAY = 50; export interface PriceFlowProps { value: number; className?: string; } const animateDigit = ( prevElement: HTMLElement | null, nextElement: HTMLElement | null, isIncreasing: boolean ) => { if (prevElement === null || nextElement === null) { return; } if (isIncreasing) { prevElement.classList.add("slide-out-up"); nextElement.classList.add("slide-in-up"); } else { prevElement.classList.add("slide-out-down"); nextElement.classList.add("slide-in-down"); } const handleAnimationEnd = () => { prevElement.classList.remove("slide-out-up", "slide-out-down"); nextElement.classList.remove("slide-in-up", "slide-in-down"); prevElement.removeEventListener("animationend", handleAnimationEnd); }; prevElement.addEventListener("animationend", handleAnimationEnd); }; export default function PriceFlow({ value, className = "" }: PriceFlowProps) { const [prevValue, setPrevValue] = useState(value); // Create refs for each digit position (tens and ones) const prevTensRef = useRef(null); const nextTensRef = useRef(null); const prevOnesRef = useRef(null); const nextOnesRef = useRef(null); useEffect(() => { if (value === prevValue) { return; } const prevTens = prevTensRef.current; const nextTens = nextTensRef.current; const prevOnes = prevOnesRef.current; const nextOnes = nextOnesRef.current; const prevTensValue = Math.floor(prevValue / 10); const currentTensValue = Math.floor(value / 10); const tensChanged = currentTensValue !== prevTensValue; if (tensChanged && prevTens && nextTens) { const isTensIncreasing = currentTensValue > prevTensValue; animateDigit(prevTens, nextTens, isTensIncreasing); } const prevOnesValue = prevValue % 10; const currentOnesValue = value % 10; const onesChanged = currentOnesValue !== prevOnesValue; if (onesChanged && prevOnes && nextOnes) { const isOnesIncreasing = currentOnesValue > prevOnesValue; setTimeout(() => { animateDigit(prevOnes, nextOnes, isOnesIncreasing); }, STAGGER_DELAY); } setPrevValue(value); }, [value, prevValue]); const formatValue = (val: number) => val.toString().padStart(2, "0"); const prevFormatted = formatValue(prevValue); const currentFormatted = formatValue(value); return ( {/* Tens digit */} {prevFormatted[0]} {currentFormatted[0]} {/* Ones digit */} {prevFormatted[1]} {currentFormatted[1]} ); }

Price Flow

Installation

Features

Props

On this page