Splitting Text

A text component that splits text into multiple parts and animates them.

Introducing Splitting Text componentMade with Motion. Highly customizable and easy to use.

Usage

<SplittingText type="chars" text="Splitting Text" />

Examples

Splitting words

Open in

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Splitting with custom variants

Open in

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Props

Prop

Type

Credits

Credits to Pace UI for the inspiration

Sliding Number

A numeric display component that smoothly animates number changes with a sliding transition effect.

Typing Text

A text component that dynamically simulates a typing animation, progressively revealing characters as if typed in real-time.