Updated: Rotating Text
By Steven Van ·
The Rotating Text component adds flip, blur, zoom and bounce transitions, plus a highlight block that resizes to fit each word.
The Rotating Text component in React Bits has been updated with new transition styles. Words can now flip, blur, zoom or drop in with a small bounce, rolling up or down.
Highlight block
A highlight block resizes smoothly to fit each word as the text changes. It also keeps the text readable on any color.
Install
The component cycles through multiple phrases with 3D rotate and flip transitions. It is available in JavaScript or TypeScript, with plain CSS or Tailwind. The TypeScript and Tailwind version installs with npx shadcn@latest add @react-bits/RotatingText-TS-TW.
React Bits
An open-source collection of 200+ animated, interactive React components and micro-interactions.
View React Bits →