Splitting Text

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

Splitting Text

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.

Splitting Text

Installation

Usage

Examples

Splitting words

Splitting lines

Splitting with custom variants

Props

Credits

On this page