{/* Title */}
Haspr Cursor Demo
{/* Demo 1 : Change Cursor Color */}
CURSOR_COLOR('RED')} onMouseLeave={() => CURSOR_COLOR('END')}>
Change Cursor Color
{/* Demo 2 : Apply Text to Jello-Blob */}
CURSOR_TEXT(dispatch, 'hi fam!', 'GREEN')} onMouseLeave={() => CURSOR_TEXT(dispatch, 'END')}>
Show Green Jelly Blob
{/* Demo 3 : Sticky Cursor */}
CURSOR_STICKY(dispatch, 'imSticky', 'SMALL')} onMouseLeave={() => CURSOR_STICKY(dispatch, 'END')}>
Sticky Cursor
{/* Demo 4 : Magnetic Elements */}
CURSOR_MAGNETIC(dispatch, 'imMagnetic', 'SMALL')} onMouseLeave={() => CURSOR_MAGNETIC(dispatch, 'END')}>
Magnet Mode
{/* Demo 6 : Video On Cursor Jello-Blob */}
{
CURSOR_VIDEO(dispatch, 'https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4', 'MEDIUM')
}}
onMouseLeave={() => {
CURSOR_VIDEO(dispatch, 'END')
}}
>
Video Blob on Cursor
{/* Demo 7 : Cursor Exclusion Mode */}
CURSOR_EXCLUSION(dispatch, 'START', 'LARGE')} onMouseLeave={() => CURSOR_EXCLUSION(dispatch, 'END')}>
Exclusion Mode
{/* Demo 8 : Reveal Texts on Hover */}
CURSOR_REVEAL(dispatch, 'START', 'imRevealing', 'SMALL')}
onMouseLeave={() => CURSOR_REVEAL(dispatch, 'END', 'imRevealing')}
>
{/* Demo 9 : Animated Underline on Hover */}
CURSOR_UNDERLINE('START', '.underline-anim')} onMouseLeave={() => CURSOR_UNDERLINE('END', '.underline-anim')}>
The Magnificent Cursor used in [Haspr Website](https://haspr.in)
and only maybe the best cursor Library of all time ? Yes it is 😉
**Author** - Abhay Rohit | Haspr, contact@haspr.in
**License** - _Copyright (c) 2022, Haspr. All rights reserved._
## Dependencies
haspr-cursor internally uses GSAP but you don't necessarily need to install it separately.
- [GSAP](https://greensock.com/gsap/)
## INSTALLATION
### NPM
```bash
npm install haspr-cursor
```
### YARN
```bash
yarn add haspr-cursor
```
## Cursor Usage
Works on [ReactJS](https://reactjs.org/) and [NextJS](https://nextjs.org/)
#### Check these points if the cursor is not working
**Note 1 : DO NOT FORGET TO IMPORT THE CURSOR STYLESHEET**
**Note 2 : WRAP YOUR APP WITH THE "HasprCursor" PROVIDER**
**Note 3 : ADD A BACKGROUND COLOR TO YOUR APP**
### 1. Declare and import the cursor
Declare the cursor in your app.js, \_app.js or index.js file
```javascript
import HasprCursor from 'haspr-cursor' // Import Wrapper
import 'haspr-cursor/dist/cursor.css' // Import Style sheet
// Import and Use These at the top level of your project
// Usually in _app.js, app.js or index.js
export default function App() {
return (
<>