91 lines
1.8 KiB
Plaintext
91 lines
1.8 KiB
Plaintext
---
|
|
title: Cursor
|
|
description: An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations.
|
|
author:
|
|
name: imskyleen
|
|
url: https://github.com/imskyleen
|
|
---
|
|
|
|
<ComponentPreview name="cursor-demo" />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstallation name="cursor" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
<CursorProvider>
|
|
<Cursor>
|
|
<svg>{...}</svg>
|
|
</Cursor>
|
|
<CursorFollow>
|
|
<div>Follow me</div>
|
|
</CursorFollow>
|
|
</CursorProvider>
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Cursor Follow Only
|
|
|
|
You can use only the `CursorFollow` (like the example below) component or the `Cursor` component.
|
|
|
|
<ComponentPreview name="cursor-follow-only-demo" />
|
|
|
|
## Props
|
|
|
|
### CursorProvider
|
|
|
|
<TypeTable
|
|
type={{
|
|
children: {
|
|
description: 'The children of the cursor provider',
|
|
type: 'React.ReactNode',
|
|
required: true,
|
|
},
|
|
}}
|
|
/>
|
|
|
|
### Cursor
|
|
|
|
<TypeTable
|
|
type={{
|
|
children: {
|
|
description: 'The children of the cursor',
|
|
type: 'React.ReactNode',
|
|
required: true,
|
|
},
|
|
}}
|
|
/>
|
|
|
|
### CursorFollow
|
|
|
|
<TypeTable
|
|
type={{
|
|
children: {
|
|
description: 'The children of the cursor follow',
|
|
type: 'React.ReactNode',
|
|
required: true,
|
|
},
|
|
sideOffset: {
|
|
description: 'The side offset of the cursor follow',
|
|
type: 'number',
|
|
required: false,
|
|
default: 15,
|
|
},
|
|
align: {
|
|
description: 'The align of the cursor follow',
|
|
type: "'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right' | 'center'",
|
|
required: false,
|
|
default: 'bottom-right',
|
|
},
|
|
transition: {
|
|
description: 'The transition of the cursor follow',
|
|
type: 'SpringOptions',
|
|
required: false,
|
|
default: '{ stiffness: 500, damping: 50, bounce: 0 }',
|
|
},
|
|
}}
|
|
/>
|