Counter

Contador de rodillos animado con easing.

Código: RODD·CP·011
Familia: Componentes
Origen: React Bits (David Haz) · Licencia MIT + Commons Clause

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/Counter-TS-TW

Cuándo usarlo

Sustituyen a un componente estándar cuando la experiencia es parte del producto.

Props para personalizarlo

Prop	Tipo	Por defecto
value	number	N/A (required)
fontSize	number	100
padding	number	0
places	number[]	[100, 10, 1 , "." , 0.1]
gap	number	8
borderRadius	number	4
horizontalPadding	number	8
textColor	string	inherit
fontWeight	string \| number	inherit
containerStyle	React.CSSProperties	{}
counterStyle	React.CSSProperties	{}
digitStyle	React.CSSProperties	{}
gradientHeight	number	16
gradientFrom	string	'black'
gradientTo	string	'transparent'
topGradientStyle	React.CSSProperties	undefined
bottomGradientStyle	React.CSSProperties	undefined

Otros efectos de componentes

DomeGallery — Cúpula 3D de imágenes que giras con el dedo.
FlowingMenu — Menú con marquesina que entra por el borde más cercano.
GooeyNav — Navegación cuyo indicador se deforma como una gota.
MagicBento — Bento grid con partículas, foco de luz y borde brillante.
MediaBetweenText — Una imagen o vídeo que se abre entre dos palabras.
PillNav — Navegación en píldora con resaltado deslizante.