Updated: True Focus
By Steven Van ·
The True Focus text animation can now mark the focused word with a box, underline or highlight, and springs between words in random order.
The React Bits True Focus text animation has been updated with new ways to mark the focused word. The frame can be a box, an underline or a soft highlight, and the focused word can scale up slightly.
Frame behaviour
The frame can spring between words rather than just moving to them. It can also visit the words in random order instead of in sequence.
Installing
True Focus applies dynamic blur and clarity across a series of words in order. It comes in JavaScript or TypeScript, with plain CSS or Tailwind. The Tailwind TypeScript version installs with npx shadcn@latest add @react-bits/TrueFocus-TS-TW.
React Bits
An open-source collection of 200+ animated, interactive React components and micro-interactions.
View React Bits →