Splitting Text
A text component that splits text into multiple parts and animates them.
Made by imskyleenSplitting Text
Installation
Usage
Examples
Splitting words
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
Splitting lines
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.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
Splitting with custom variants
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