React Bits

Blur Text

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

Blur Text, a React Bits 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 React Bits 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.