TextPressure
Tipografía variable que se ensancha y engorda según la cercanía del cursor.
- Código: RODD·TX·028
- Familia: Tipografía
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/TextPressure-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 | "Compressa" |
| fontFamily | string | Roboto Flex |
| fontUrl | string | URL to a .woff2 or .ttf file |
| flex | boolean | true |
| scale | boolean | false |
| alpha | boolean | false |
| stroke | boolean | false |
| width | boolean | true |
| weight | boolean | true |
| italic | boolean | true |
| textColor | string | #FFFFFF |
| strokeColor | string | #FF0000 |
| className | string | "" |
| minFontSize | number | 24 |
Otros efectos de tipografía
- VerticalCutReveal — Texto que se revela con un corte vertical.
- BlurText — Las palabras emergen del desenfoque hasta quedar nítidas.
- CurvedLoop — Marquesina que fluye sobre una curva y se puede arrastrar.
- EchoText — Copias fantasma siguen al texto hasta fundirse en una sola palabra.
- GradientText — Degradado animado que recorre el texto en vivo.
- MaskedHeading — Titular gigante con imagen o malla de color vista a través de las letras.