Astra

Blur Text

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

Blur Text, a Astra component

Use Blur Text 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/BlurText-TS-TW
How to install Astra components

Related components

  • Falling Text

    Text that breaks apart and tumbles into a pile you can drag, throw and swipe, then flies back into place.

  • Scroll Reveal

    Text gently unblurs and reveals on scroll.

  • Shiny Text

    A sheen of light that sweeps across text, from soft bands to chrome-like reflections.