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' |