VariableProximity
El peso de cada letra cambia según la distancia al puntero.
- Código: RODD·TX·031
- Familia: Tipografía
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/VariableProximity-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 |
|---|
| label | string | "" |
| fromFontVariationSettings | string | 'wght' 400, 'opsz' 9 |
| toFontVariationSettings | string | 'wght' 800, 'opsz' 40 |
| containerRef | RefObject<HTMLDivElement> | undefined |
| radius | number | 50 |
| falloff | 'linear' | 'exponential' | 'gaussian' | "linear" |
Otros efectos de tipografía
- 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.
- ScrambledText — Las letras cercanas al cursor se revuelven y vuelven a su sitio.