TrueFocus
Un visor de enfoque salta entre palabras desenfocando el resto.
- Código: RODD·TX·030
- Familia: Tipografía
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/TrueFocus-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 |
|---|
| sentence | string | 'True Focus' |
| separator | string | ' ' |
| manualMode | boolean | false |
| blurAmount | number | 5 |
| borderColor | string | 'green' |
| glowColor | string | 'rgba(0, 255, 0, 0.6)' |
| animationDuration | number | 0.5 |
| pauseBetweenAnimations | number | 1 |
Otros efectos de tipografía
- WavyText — Texto que entra con una ola.
- CircularText — Texto en órbita circular que acelera o se detiene al pasar el ratón.
- DepthText — Tipografía extruida en capas con parallax 3D.
- FoldText — Las líneas se despliegan como papel doblado que se abre.
- Highlighter — Subrayado dibujado a mano sobre el texto.
- ParticleText — El texto se forma a partir de partículas que se dispersan y reagrupan.