Name: Number Flow
Rating: 5.0 (7754 reviews)

项目概述

Number Flow（number-flow.barvian.me）是一个开源的高质感动态数字滚动组件库，拥有 7,600+ GitHub Stars。它专注于解决常规数字计数器存在的布局抖动与动画生硬问题，通过将单个数字字符独立拆解并结合物理弹簧曲线（Spring Physics），实现极其丝滑自然的数值流转与货币格式化动效。

核心特性

🔢 字符级弹簧形变过渡：数字位、小数点、千分符与货币符号平滑渐变位移，彻底杜绝外层容器跳动抖动。
🌐 全主流前端生态同构：官方提供 @number-flow/react、@number-flow/vue、@number-flow/svelte 与原生 JS 独立包。
🌍 原生 Intl.NumberFormat 支持：开箱即用支持全球法定货币、百分比、紧凑单位与各国语言本地化格式。
♿️ 无障碍读取完全合规：屏幕朗读器直接获取最终数值结果，不会受到滚动中间帧的字符干扰。

快速上手与示例代码

# 安装 React 版组件
npm install @number-flow/react

import React, { useState } from 'react';
import NumberFlow from '@number-flow/react';

export function RevenueMetric() {
  const [value, setValue] = useState(14850.50);

  return (
    <div className="p-5 rounded-2xl bg-card border border-border shadow-xs flex flex-col gap-2">
      <span className="text-xs font-medium text-muted-foreground">累计总营收 (ARR)</span>
      <NumberFlow
        value={value}
        format={{ style: 'currency', currency: 'USD' }}
        className="text-3xl font-bold font-mono text-foreground"
      />
    </div>
  );
}

技术选型建议与适用场景

非常适合：金融仪表盘、电商交易大屏、SaaS 计费结算、实时数据监控及需要展示动态数值高光卡片的产品。
与常规 CountUp 对比：Number Flow 具备独立的字符级定位与遮罩渲染，视觉质感与微动效细腻度远超传统累加器。

Number Flow

项目概述

核心特性

快速上手与示例代码

技术选型建议与适用场景

讨论与评价

相关组件推荐

Kinetics (Colorion)

23rd

nxui (Vue)