Astra

Split Text

Splits text into characters / words for staggered entrance animation.

Split Text, a Astra component

Use Split 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/SplitText-TS-TW
How to install Astra components

Related components

  • Circular Text

    Layouts characters around a circle with optional rotation animation.

  • Glitch Text

    RGB split and distortion glitch effect with jitter effects.

  • Shuffle

    Animated text reveal where characters shuffle before settling.