BlurText
Las palabras emergen del desenfoque hasta quedar nítidas.
- Código: RODD·TX·002
- Familia: Tipografía
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/BlurText-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 |
|---|
| text | string | "" |
| animateBy | string | "words" |
| direction | string | "top" |
| delay | number | 200 |
| stepDuration | number | 0.35 |
| threshold | number | 0.1 |
| rootMargin | string | "0px" |
| onAnimationComplete | function | undefined |
Otros efectos de tipografía
- DecryptedText — Descifrado estilo hacker: glifos aleatorios hasta revelar el texto.
- FallingText — Las palabras caen con gravedad y rebotan con física real.
- GradualSpacingText — Las letras se separan hasta su espaciado final.
- MorphingText — Palabras que se funden unas en otras.
- ScrollAndSwapText — Texto que cambia de letras al hacer scroll.
- Shuffle — Las letras barajan su posición antes de asentarse.