Updated: Split Text
By Steven Van ·
Split Text in React Bits adds flip, pop, blur, skew and wave entrances, plus accent colors and cursor-driven lift and ripple effects.
Split Text in React Bits has been updated with several new ways to animate text. Text can now flip, pop, blur, skew or wave into place, and the animation can loop or replay on hover or click.
New effects
Pieces of text can arrive in an accent color. Letters can also lift or ripple under the cursor.
Installation
The component splits text into characters or words for a staggered entrance animation. It installs with npx shadcn@latest add @react-bits/SplitText-TS-TW. Versions are available in JavaScript or TypeScript, with plain CSS or Tailwind.
React Bits
An open-source collection of 200+ animated, interactive React components and micro-interactions.
View React Bits →