58 lines
1.2 KiB
Plaintext
58 lines
1.2 KiB
Plaintext
---
|
|
title: Rotating Text
|
|
description: A text component that smoothly animates text changes with a rotating transition effect.
|
|
author:
|
|
name: imskyleen
|
|
url: https://github.com/imskyleen
|
|
new: true
|
|
---
|
|
|
|
<ComponentPreview name="rotating-text-demo" />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstallation name="rotating-text" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
<RotatingText text={['Rotating', 'Text']} />
|
|
```
|
|
|
|
## Props
|
|
|
|
### RotatingText
|
|
|
|
<TypeTable
|
|
type={{
|
|
text: {
|
|
description: 'The text(s) to rotate.',
|
|
type: 'string | string[]',
|
|
required: true,
|
|
},
|
|
duration: {
|
|
description: 'The duration of the animation in milliseconds.',
|
|
type: 'number',
|
|
required: false,
|
|
default: '2000',
|
|
},
|
|
transition: {
|
|
description: 'The transition to use for the animation.',
|
|
type: 'Transition',
|
|
required: false,
|
|
default: 'duration: 0.3, ease: "easeOut"',
|
|
},
|
|
y: {
|
|
description: 'The y-offset of the text animation.',
|
|
type: 'number',
|
|
required: false,
|
|
default: '-50',
|
|
},
|
|
containerClassName: {
|
|
description: 'The class name for the container of the text.',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
}}
|
|
/>
|