TextAnimate
Texto con varias animaciones de entrada (fade, blur, slide…).
- Código: RODD·TX·064
- Familia: Tipografía
- Origen: Magic UI (Dillion Verma y colaboradores) · Licencia MIT
Cómo instalarlo
npx shadcn@latest add "https://magicui.design/r/text-animate.json"
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 | string | |
| className | string | |
| segmentClassName | string | |
| delay | number | 0 |
| duration | number | 0.3 |
| variants | Variants | |
| as | MotionElementType | "p" |
| by | AnimationType | "word" |
| startOnView | boolean | true |
| once | boolean | false |
| animation | AnimationVariant | "fadeIn" |
| accessible | boolean | true |
Otros efectos de tipografía
- TrueFocus — Un visor de enfoque salta entre palabras desenfocando el resto.
- WarpText — Distorsión WebGL que dobla y refracta el texto alrededor del puntero.
- BreathingText — Texto que “respira” cambiando su peso.
- 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.