https://github.com/ehsan-shv/react-creative-cursor

A creative and customizable React cursor component.
https://github.com/ehsan-shv/react-creative-cursor

cursor cursor-follower custom-cursor gelly-cursor gsap3 magnetic-cursor react reactjs sticky-cursor

Last synced: 6 days ago
JSON representation

A creative and customizable React cursor component.

• Host: GitHub
• URL: https://github.com/ehsan-shv/react-creative-cursor
• Owner: ehsan-shv
• License: mit
• Created: 2022-04-20T15:21:39.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-07-04T22:34:24.000Z (about 2 years ago)
• Last Synced: 2024-09-19T05:19:48.898Z (15 days ago)
• Topics: cursor, cursor-follower, custom-cursor, gelly-cursor, gsap3, magnetic-cursor, react, reactjs, sticky-cursor
• Language: TypeScript
• Homepage: https://react-creative-cursor-demo.vercel.app/
• Size: 20.6 MB
• Stars: 73
• Watchers: 1
• Forks: 16
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-creative-cursor



> A creative and customizable React cursor follower component. Inspired by **cuberto.com** and **14islands.com**.

## Options

- Magnetic cursor

- Sticky cursor

- Gelly animation

- Add background color and background image

- Add text

- Change cursor size smoothly

- Exclusion Mode

Demo

## Installation

```

npm i react-creative-cursor

```

## Basic Example

```tsx

import { Cursor } from 'react-creative-cursor';

import 'react-creative-cursor/dist/styles.css';

const index = () => {

  return (

    <>

      

    >

  );

};

```

**It's essential to add the Cursor component to each route if you want to use all options properly. otherwise, if you want to use cursor follower, feel free and import in app or layout component**.

## Magnetic Cursor

```tsx

import { Cursor } from 'react-creative-cursor';

import 'react-creative-cursor/dist/styles.css';

const index = () => {

  return (

    <>

      

      


        
Magnetic Cursor

      

    >

  );

};

```


## Sticky Cursor

```tsx

import { Cursor } from 'react-creative-cursor';

import 'react-creative-cursor/dist/styles.css';

const index = () => {

  return (

    <>

      

      


        
Sticky Cursor

      

    >

  );

};

```


It's better for the element which the pointer sticks to be a **block** and **text-center** element.

## Change Color

```tsx

import { Cursor } from 'react-creative-cursor';

import 'react-creative-cursor/dist/styles.css';

const index = () => {

  return (

    <>

      

      


        
Colorized Cursor

      

    >

  );

};

```


## Change Size

```tsx

import { Cursor } from 'react-creative-cursor';

import 'react-creative-cursor/dist/styles.css';

const index = () => {

  return (

    <>

      

      


        
Sized Cursor

      

    >

  );

};

```


## Change Background Image

```tsx

import { Cursor } from 'react-creative-cursor';

import 'react-creative-cursor/dist/styles.css';

const index = () => {

  return (

    <>

      

      


        
React.js

      

    >

  );

};

```


## Exclusion Mode

```tsx

import { Cursor } from 'react-creative-cursor';

import 'react-creative-cursor/dist/styles.css';

const index = () => {

  return (

    <>

      

      


        
React.js

      

    >

  );

};

```


## Add Text

```tsx

import { Cursor } from 'react-creative-cursor';

import 'react-creative-cursor/dist/styles.css';

const index = () => {

  return (

    <>

      

      


        
React.js

      

    >

  );

};

```


## Props

| Props                            | Value Type                                 | Default Value  |

| -------------------------------- | ------------------------------------------ | -------------- |

| isGelly                          | `boolean`                                  | false          |

| animationDuration                | `number`                                   | 1.25           |

| animationEase                    | `string \| gsap.EaseFunction \| undefined` | Expo.easeOut   |

| gellyAnimationAmount             | `number`                                   | 50             |

| stickAnimationAmount             | `number`                                   | 0.09           |

| stickAnimationDuration           | `number`                                   | 0.7            |

| stickAnimationEase               | `string \| gsap.EaseFunction \| undefined` | Power4.easeOut |

| magneticAnimationAmount          | `number`                                   | 0.2            |

| magneticAnimationDuration        | `number`                                   | 0.7            |

| magneticAnimationEase            | `string \| gsap.EaseFunction \| undefined` | Power4.easeOut |

| colorAnimationEase               | `string \| gsap.EaseFunction \| undefined` | Power4.easeOut |

| colorAnimationDuration           | `number`                                   | 0.2            |

| backgroundImageAnimationEase     | `string \| gsap.EaseFunction \| undefined` | undefined      |

| backgroundImageAnimationDuration | `number`                                   | 0              |

| sizeAnimationEase                | `string \| gsap.EaseFunction \| undefined` | Expo.easeOut   |

| sizeAnimationDuration            | `number`                                   | 0.5            |

| textAnimationEase                | `string \| gsap.EaseFunction \| undefined` | Expo.easeOut   |

| textAnimationDuration            | `number`                                   | 1              |

| cursorSize                       | `number`                                   | 48             |

| cursorBackgrounColor             | `string`                                   | '#000'         |

| exclusionBackgroundColor         | `string`                                   | '#fff'         |

| cursorInnerColor                 | `string`                                   | '#fff'         |