FallingText
Las palabras caen con gravedad y rebotan con física real.
- Código: RODD·TX·009
- Familia: Tipografía
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/FallingText-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 | |
| highlightWords | string[] | [] |
| highlightClass | string | "highlighted" |
| trigger | 'click' | 'hover' | 'auto' | 'scroll' | auto |
| backgroundColor | string | "transparent" |
| wireframes | boolean | false |
| gravity | number | 1 |
| mouseConstraintStiffness | number | 0.2 |
| fontSize | string | "1rem" |
| wordSpacing | string | "2px" |
Otros efectos de tipografía
- Highlighter — Subrayado dibujado a mano sobre el texto.
- ParticleText — El texto se forma a partir de partículas que se dispersan y reagrupan.
- ScrollFloat — Las letras flotan hacia su posición al hacer scroll.
- SparklesText — Texto con destellos que aparecen alrededor.
- TextAnimate — Texto con varias animaciones de entrada (fade, blur, slide…).
- TextType — Máquina de escribir con cursor parpadeante y ritmo ajustable.