# Updated: True Focus

By Steven Van · 2026-10-13

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](<https://creatorstoolbox.com/resources/react-bits>) True Focus text animation has been [updated](<https://reactbits.dev/text-animations/true-focus>) 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](<https://reactbits.dev/favicon.ico>)

React Bits

An open-source collection of 200+ animated, interactive React components and micro-interactions.

[View React Bits →](<https://creatorstoolbox.com/resources/react-bits>)

Sources

[Original source](<https://reactbits.dev/text-animations/true-focus>)

[Read Updated: True Focus on Creators Toolbox](<https://creatorstoolbox.com/blog/react-bits-updated-true-focus>)

---
Canonical source: https://creatorstoolbox.com/blog/react-bits-updated-true-focus