Vibeset

Focus sentence

The sentence is plain text, word by word with its space: blurring is a visual filter, so anyone who cannot see it reads the whole sentence straight through. The marker is not drawn from a calculation, it is measured: every word knows where it is and how big it is, so it works with any font and with the sentence broken over several lines, and it is measured again when the box width changes or the fonts arrive. Transitions are switched on after the first placement, or the marker is born in the corner and flies across the sentence. In manual mode it has a single tab stop and is driven with the arrow keys.

And the React Bits original: True Focus

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their True Focus, and this is what we saw in theirs in case you prefer to use the original.

When to use it

For a short, central sentence you want read slowly, one word at a time. It has the least code of the ones we analyse here, at 8.4 KB.

Watch out for

The blur makes whatever is not active unreadable: it does not suit text that has to be read in full, least of all a paragraph.

Accessibility

It uses useReducedMotion to drop the movement. With the blur on, the contrast of the inactive words is what to measure.