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	Default
`inViewOnce?`	`boolean`	`true`
`inViewMargin?`	`string`	`0px`
`inView?`	`boolean`	`false`
`motionVariants?`	`Variants`	-
`type?`	`'chars' \| 'words' \| 'lines'`	`chars`
`text`	`string \| string[]`	-
`className?`	`string`	-

Credits

Credits to Pace UI for the inspiration

Built by Skyleen. The source code is available on GitHub.