react-creative-cursor
v1.2.7TypeScript
A creative and customizable React cursor component.
0/weekUpdated 3 years agoMITUnpacked: 160.6 KB
Published by Ehsan Shahvirdi
npm install react-creative-cursorreact-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' |