React Bits

True Focus

Applies dynamic blur / clarity based over a series of words in order.

True Focus, a React Bits component

Use True Focus in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/TrueFocus-TS-TW
How to install React Bits components

Related components

  • Blur Text

    Text starts blurred then crisply resolves for a soft-focus reveal effect.

  • Scrambled Text

    Detects cursor position and applies a distortion effect to text.

  • Split Text

    Splits text into characters / words for staggered entrance animation.