Astra

True Focus

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

True Focus, a Astra 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 Astra 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.