Número con estela

Número cuyas cifras ruedan hacia el nuevo valor con desenfoque de movimiento vertical, una tras otra.

Vista previa en vivo

$12,480

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { BlurNumber } from "furin";

También con pnpm add furin, yarn add furin o bun add furin. Cada componente trae su CSS y lo importa por ti.

Prop	Tipo	Por defecto	Descripción
value	number	"auto"	El número a mostrar; al cambiar, cada cifra rueda. Sin valor, cambia sola entre samples.
samples	number[]	"[12480, 3907, 58213, 842, 27650, 9164]"	Valores que recorre sola cuando no se pasa value.
interval	number	2.6	Segundos entre cambios en modo automático.
prefix	string	"$"	Texto fijo antes del número.
suffix	string	""	Texto fijo después del número.
decimals	number	0	Cifras decimales.
locale	string	"en-US"	Configuración regional para los separadores (por ejemplo es-MX).
size	number	96	Tamaño de la letra, en px.
maxBlur	number	9	Desenfoque vertical máximo, en px, a la máxima velocidad.
stagger	number	55	Milisegundos de retraso entre una cifra y la de su izquierda.
color	string	"#F4F5F7"	Color del número.
accent	string	"#7CF5C6"	Color que toman las cifras mientras ruedan.

Odómetro
Gratis
Números que ruedan hasta su valor.
Texto
Ola de grosor
Gratis
El grosor de una fuente variable ondula según la cercanía del cursor, letra por letra.
Texto
Ráfaga
Gratis
Letras que salen volando con el cursor.
Texto