GradientText
Degradado animado que recorre el texto en vivo.
- Código: RODD·TX·013
- Familia: Tipografía
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/GradientText-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 |
|---|
| children | ReactNode | - |
| className | string | '' |
| colors | string[] | ["#5227FF", "#FF9FFC", "#B497CF"] |
| animationSpeed | number | 8 |
| direction | 'horizontal' | 'vertical' | 'diagonal' | 'horizontal' |
| pauseOnHover | boolean | false |
| yoyo | boolean | true |
| showBorder | boolean | false |
Otros efectos de tipografía
- 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.
- 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.