Vibeset

Frase con foco

La frase es texto normal, palabra a palabra con su espacio: desenfocar es un filtro visual y quien no ve lee la frase entera, de corrido. El marcador no se dibuja con una cuenta, se mide: cada palabra sabe dónde está y cuánto ocupa, así que funciona con cualquier fuente y con la frase partida en varias líneas, y se vuelve a medir cuando cambia el ancho de la caja o llegan las fuentes. Las transiciones se encienden después de colocarlo la primera vez, o el marcador nace en la esquina y cruza la frase volando. En modo manual tiene una sola parada de tabulador y se maneja con las flechas.

Y el original de React Bits: True Focus

Esta pieza está escrita desde cero en Vibeset: no se ha copiado ni portado nada de React Bits. Hace algo parecido a su True Focus, y esto es lo que vimos del suyo por si prefieres usar el original.

Cuándo sí

Para una frase corta y central que quieres que se lea despacio, una palabra cada vez. Es la que menos código tiene de las que analizamos aquí, con 8,4 KB.

Ojo con

El desenfoque deja ilegible lo que no está activo: no sirve para texto que haya que leer entero, y menos para un párrafo.

Accesibilidad

Usa useReducedMotion para quitar el movimiento. Con el desenfoque puesto, el contraste de las palabras inactivas es lo que hay que medir.