SplitText
Divide el texto en letras o palabras para una entrada escalonada.
- Código: RODD·TX·024
- Familia: Tipografía
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/SplitText-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 |
|---|
| tag | string | "p" |
| text | string | "" |
| className | string | "" |
| delay | number | 50 |
| duration | number | 1.25 |
| ease | string | "power3.out" |
| splitType | string | "chars" |
| from | object | { opacity: 0, y: 40 } |
| to | object | { opacity: 1, y: 0 } |
| threshold | number | 0.1 |
| rootMargin | string | "-100px" |
| textAlign | string | "center" |
| onLetterAnimationComplete | function | undefined |
Otros efectos de tipografía
- TextLoop — Marquesina continua que fluye por trayectorias SVG curvas.
- VariableFontAndCursor — Tipografía variable controlada por la posición del cursor.
- ASCIIText — Texto 3D renderizado como arte ASCII con ondas retro.
- ComicText — Texto con estilo de cómic que entra con rebote.
- DiaTextReveal — Una banda de color barre el texto antes de asentarse.
- FuzzyText — Texto vibrante con interferencia analógica controlable al hover.