Splitting Text Animation

A component that applies a splitting animation to text, perfect for emphasizing important information.

Pumki UI

Introducing Pumki UI SplitterMade with Motion. Highly customizable and easy to use.

Installation

Usage

1import { SplittingText } from '@/components/pumki-ui/text/text-splitting';

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

Example

Splitting words

Pumki UI

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

Splitting lines

Pumki UI

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

Pumki UI

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

Props

Prop	Type	Default	Description
`inViewOnce?`	`boolean`	`true`	Animate only once when in view
`inViewMargin?`	`string`	`0px`	Margin for in-view detection
`inView?`	`boolean`	`false`	Force animation in view
`motionVariants?`	`Variants`	`-`	Custom Framer Motion variants
`type?`	`‘chars’ \| ‘words’ \| ‘lines’`	`chars`	How to split the text
`text`	`string \| string[]`	`-`	Text to animate or array of strings
`className?`	`string`	`-`	Custom class name

Splitting Text Animation

Installation

pnpm

npm

yarn

bun

Usage

Example

Splitting words

Splitting lines

Splitting with custom variants

Props