react-creative-cursor

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

import { Cursor } from 'react-creative-cursor';
import 'react-creative-cursor/dist/styles.css';

const index = () => {
  return (
    <>
      <Cursor isGelly={true} />
    </>
  );
};

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

import { Cursor } from 'react-creative-cursor';
import 'react-creative-cursor/dist/styles.css';

const index = () => {
  return (
    <>
      <Cursor isGelly={true} />
      <div data-cursor-magnetic>
        <h1>Magnetic Cursor</h1>
      </div>
    </>
  );
};

Sticky Cursor

import { Cursor } from 'react-creative-cursor';
import 'react-creative-cursor/dist/styles.css';

const index = () => {
  return (
    <>
      <Cursor isGelly={true} />
      <div data-cursor-stick="#stick-title">
        <h1 id="stick-title" style={{textAlign: center}}>Sticky Cursor</h1>
      </div>
    </>
  );
};

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

Change Color

import { Cursor } from 'react-creative-cursor';
import 'react-creative-cursor/dist/styles.css';

const index = () => {
  return (
    <>
      <Cursor isGelly={true} />
      <div data-cursor-color="#61dbfb">
        <h1 id="stick-title">Colorized Cursor</h1>
      </div>
    </>
  );
};

Change Size

import { Cursor } from 'react-creative-cursor';
import 'react-creative-cursor/dist/styles.css';

const index = () => {
  return (
    <>
      <Cursor isGelly={true} />
      <div data-cursor-size="80px">
        <h1 id="stick-title">Sized Cursor</h1>
      </div>
    </>
  );
};

Change Background Image

import { Cursor } from 'react-creative-cursor';
import 'react-creative-cursor/dist/styles.css';

const index = () => {
  return (
    <>
      <Cursor isGelly={true} />
      <div data-cursor-background-image="https://reactjs.org/logo-og.png" data-cursor-size="200px">
        <h1 id="stick-title">React.js</h1>
      </div>
    </>
  );
};

Exclusion Mode

import { Cursor } from 'react-creative-cursor';
import 'react-creative-cursor/dist/styles.css';

const index = () => {
  return (
    <>
      <Cursor isGelly={true} />
      <div data-cursor-exclusion style={{backgroundColor: '#fff'}}>
        <h1 id="stick-title">React.js</h1>
      </div>
    </>
  );
};

Add Text

import { Cursor } from 'react-creative-cursor';
import 'react-creative-cursor/dist/styles.css';

const index = () => {
  return (
    <>
      <Cursor isGelly={true} />
      <div data-cursor-text="React" data-cursor-size="100px">
        <h1 id="stick-title">React.js</h1>
      </div>
    </>
  );
};

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'