CountUp
Contador animado con separadores y decimales, ideal para métricas.
- Código: RODD·TX·004
- Familia: Tipografía
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/CountUp-TS-TW
Cuándo usarlo
Úsalas en titulares y mensajes clave. Una por pantalla: si todo se mueve, nada destaca.
Props para personalizarlo
| Prop | Tipo | Por defecto |
|---|
| to | number | — |
| from | number | 0 |
| direction | string | "up" |
| delay | number | 0 |
| duration | number | 2 |
| className | string | "" |
| startWhen | boolean | true |
| separator | string | "" |
| onStart | function | — |
| onEnd | function | — |
Otros efectos de tipografía
- EchoText — Copias fantasma siguen al texto hasta fundirse en una sola palabra.
- GradientText — Degradado animado que recorre el texto en vivo.
- MaskedHeading — Titular gigante con imagen o malla de color vista a través de las letras.
- ScrambledText — Las letras cercanas al cursor se revuelven y vuelven a su sitio.
- ShinyText — Destello metálico que recorre el texto como un reflejo.
- StrokeText — Las letras se dibujan con trazo y después se rellenan.