# Updated: Blur Text

By Steven Van · 2026-10-13

Blur Text in React Bits gains new entrance styles, start positions, replay triggers, a second start colour and a hover option that keeps one word sharp.

The Blur Text component in [React Bits](<https://creatorstoolbox.com/resources/react-bits>) has a wider set of animation options, according to its [updated page](<https://reactbits.dev/text-animations/blur-text>). Text can now zoom, tilt in 3D, pull into focus or drift in, starting from the middle, the end or at random.

## Playback options

The animation can loop, or replay on hover or click.

## Colour and hover behaviour

Text can start in a second colour before resolving. The hovered word can be kept sharp.

## Installation

The component installs with the shadcn CLI, in JavaScript or TypeScript and with plain CSS or Tailwind. The TypeScript and Tailwind version uses npx shadcn@latest add @react-bits/BlurText-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/blur-text>)

[Read Updated: Blur Text on Creators Toolbox](<https://creatorstoolbox.com/blog/react-bits-updated-blur-text>)

---
Canonical source: https://creatorstoolbox.com/blog/react-bits-updated-blur-text