A creative and customizable React cursor follower component. Inspired bycuberto.com and14islands.com.
- Magnetic cursor
- Sticky cursor
- Gelly animation
- Add background color and background image
- Add text
- Change cursor size smoothly
- Exclusion Mode
Demo
npm i react-creative-cursor
import{Cursor}from'react-creative-cursor';import'react-creative-cursor/dist/styles.css';constindex=()=>{return(<><CursorisGelly={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.
import{Cursor}from'react-creative-cursor';import'react-creative-cursor/dist/styles.css';constindex=()=>{return(<><CursorisGelly={true}/><divdata-cursor-magnetic><h1>Magnetic Cursor</h1></div></>);};import{Cursor}from'react-creative-cursor';import'react-creative-cursor/dist/styles.css';constindex=()=>{return(<><CursorisGelly={true}/><divdata-cursor-stick="#stick-title"><h1id="stick-title"style={{textAlign:center}}>Sticky Cursor</h1></div></>);};It's better for the element which the pointer sticks to be ablock andtext-center element.
import{Cursor}from'react-creative-cursor';import'react-creative-cursor/dist/styles.css';constindex=()=>{return(<><CursorisGelly={true}/><divdata-cursor-color="#61dbfb"><h1id="stick-title">Colorized Cursor</h1></div></>);};import{Cursor}from'react-creative-cursor';import'react-creative-cursor/dist/styles.css';constindex=()=>{return(<><CursorisGelly={true}/><divdata-cursor-size="80px"><h1id="stick-title">Sized Cursor</h1></div></>);};import{Cursor}from'react-creative-cursor';import'react-creative-cursor/dist/styles.css';constindex=()=>{return(<><CursorisGelly={true}/><divdata-cursor-background-image="https://reactjs.org/logo-og.png"data-cursor-size="200px"><h1id="stick-title">React.js</h1></div></>);};import{Cursor}from'react-creative-cursor';import'react-creative-cursor/dist/styles.css';constindex=()=>{return(<><CursorisGelly={true}/><divdata-cursor-exclusionstyle={{backgroundColor:'#fff'}}><h1id="stick-title">React.js</h1></div></>);};import{Cursor}from'react-creative-cursor';import'react-creative-cursor/dist/styles.css';constindex=()=>{return(<><CursorisGelly={true}/><divdata-cursor-text="React"data-cursor-size="100px"><h1id="stick-title">React.js</h1></div></>);};| 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' |
