ScrambledText
Las letras cercanas al cursor se revuelven y vuelven a su sitio.
- Código: RODD·TX·017
- Familia: Tipografía
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/ScrambledText-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 |
|---|
| radius | number | 100 |
| duration | number | 1.2 |
| speed | number | 0.5 |
| scrambleChars | string | '.:' |
| children | React.ReactNode | |
| className | string | "" |
| style | React.CSSProperties | {} |
Otros efectos de tipografía
- Shuffle — Las letras barajan su posición antes de asentarse.
- TextAlongPath — Texto que sigue un trazado curvo.
- TextPressure — Tipografía variable que se ensancha y engorda según la cercanía del cursor.
- VariableProximity — El peso de cada letra cambia según la distancia al puntero.
- AuroraText — Texto relleno con una aurora de colores animada.
- CountUp — Contador animado con separadores y decimales, ideal para métricas.