84 lines
1.7 KiB
Plaintext
84 lines
1.7 KiB
Plaintext
---
|
|
title: Splitting Text
|
|
description: A text component that splits text into multiple parts and animates them.
|
|
author:
|
|
name: imskyleen
|
|
url: https://github.com/imskyleen
|
|
---
|
|
|
|
<ComponentPreview name="splitting-text-demo" />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstallation name="splitting-text" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
<SplittingText type="chars" text="Splitting Text" />
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Splitting words
|
|
|
|
<ComponentPreview name="splitting-words-demo" />
|
|
|
|
### Splitting lines
|
|
|
|
<ComponentPreview name="splitting-lines-demo" />
|
|
|
|
### Splitting with custom variants
|
|
|
|
<ComponentPreview name="splitting-with-custom-variants-demo" />
|
|
|
|
## Props
|
|
|
|
<TypeTable
|
|
type={{
|
|
className: {
|
|
description: 'The className of the component',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
text: {
|
|
description: 'The text to split',
|
|
type: 'string | string[]',
|
|
required: true,
|
|
},
|
|
type: {
|
|
description: 'The type of text to split',
|
|
type: "'chars' | 'words' | 'lines'",
|
|
required: false,
|
|
default: 'chars',
|
|
},
|
|
motionVariants: {
|
|
description: 'The motion variants of the component',
|
|
type: 'Variants',
|
|
required: false,
|
|
},
|
|
inView: {
|
|
description: 'Whether the component is in view',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'false',
|
|
},
|
|
inViewMargin: {
|
|
description: 'The margin of the component when it is in view',
|
|
type: 'string',
|
|
required: false,
|
|
default: '0px',
|
|
},
|
|
inViewOnce: {
|
|
description: 'Whether the component should only animate once',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'true',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
## Credits
|
|
|
|
- Credits to [Pace UI](https://www.paceui.com/docs/components/text-reveal) for the inspiration
|