Updated: Blur Text
By Steven Van ·
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 has a wider set of animation options, according to its updated page. 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
An open-source collection of 200+ animated, interactive React components and micro-interactions.
View React Bits →