The Magnificent Cursor used in Haspr Website
and only maybe the best cursor Library of all time ? Yes it is 😉
Author - Abhay Rohit | Haspr, [email protected]
License - Copyright (c) 2022, Haspr. All rights reserved.
haspr-cursor internally uses GSAP but you don't necessarily need to install it separately.
npm install haspr-cursoryarn add haspr-cursorNote 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
Declare the cursor in your app.js, _app.js or index.js file
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 (
<>
<HasprCursor>{/* All Other Code */}</HasprCursor>
</>
)
}Import :
import { DispatchCursor, CURSOR_SHOW, CURSOR_STICKY } from 'haspr-cursor'In Order to Dispatch Animations use Functions as Follows:
const dispatch = DispatchCursor()Important: Make sure to add "data-magnetism" attribute on div or any other element when using sticky or magnetic cursor
<div data-magnetism id="magnetize-me" onMouseEnter={() => CURSOR_STICKY(dispatch, 'magnetize-me')}>
I'm some div
</div>Cursor Actions with Parameters :
| Function | Parameters | Description |
|---|---|---|
CURSOR_SHOW() |
() |
Displays Cursor |
CURSOR_HIDE() |
() |
Hides Cursor |
CURSOR_COLOR() |
(color) |
Change the Color of Cursor |
CURSOR_TEXT() |
(dispatch, text, color) |
Shows Jelly Blob with Text Inside |
CURSOR_EXCLUSION() |
(dispatch, state) |
Shows Jelly Blob with Exclusion Mode |
CURSOR_STICKY() |
(dispatch, id, size) |
Make Element Stick to Cursor |
CURSOR_MAGNETIC() |
(dispatch, id) |
Make Cursor Magnetized to Element |
CURSOR_VIDEO() |
(dispatch, video, size) |
Show Jelly Blob with a Video Inside |
CURSOR_REVEAL() |
(dispatch, state, id, size) |
Reveal Text and make it Stick to Cursor |
CURSOR_UNDERLINE() |
(state, id) |
Expand Collapse Underline of Text |
dispatch - Cursor Action are dispatched for Execution (Mandatory)
state - START to begin END to end
color - Empty or null for Black, or Color name in CAPS eg "RED" or "GREEN"
id - DOM ID of Element in Action or END to end Action
text - Text to be Displayed eg "Hi" or "Explore" text, "CLOSE" or "PLAY" as icons or END to end Action
video - Local Path or URL to VIDEO to be Displayed or END to end Action
Note 1 : When using Sticky or Magnetic, include a data-magnetism Attribute on Target Element
Note 2 : Be Sure to Put END in state, id, text and video props to Exit Animations
Note 3 : CURSOR_REVEAL requires state: "END" as well as id when Exiting unlike all others
| Function | Values | Description |
|---|---|---|
dispatch({ type: "SET_THEME", value: "LIGHT_MODE" }) |
("LIGHT_MODE","DARK_MODE") |
Set Website Theme |
dispatch({ type: "SET_SHOWREEL", value: true }) |
(true, false) |
Show or Hide Showreel |
Copy and paste this snipper to test everything
import {
DispatchCursor,
CURSOR_SHOW,
CURSOR_HIDE,
CURSOR_COLOR,
CURSOR_TEXT,
CURSOR_EXCLUSION,
CURSOR_STICKY,
CURSOR_MAGNETIC,
CURSOR_VIDEO,
CURSOR_REVEAL,
CURSOR_UNDERLINE,
} from 'haspr-cursor'
//$ Importing Our Functions
export default function CursorDemo() {
//` The Cursor Action Dispatcher initialized
const dispatch = DispatchCursor()
//& VIEW
return (
<div onMouseEnter={CURSOR_SHOW} onMouseLeave={CURSOR_HIDE} style={baseStyle}>
{/* Title */}
<div style={titleStyle}>Haspr Cursor Demo</div>
{/* Demo 1 : Change Cursor Color */}
<div style={contStyle} onMouseEnter={() => CURSOR_COLOR('RED')} onMouseLeave={() => CURSOR_COLOR('END')}>
<div>Change Cursor Color</div>
</div>
{/* Demo 2 : Apply Text to Jello-Blob */}
<div style={contStyle} onMouseEnter={() => CURSOR_TEXT(dispatch, 'hi fam!', 'GREEN')} onMouseLeave={() => CURSOR_TEXT(dispatch, 'END')}>
<div>Show Green Jelly Blob</div>
</div>
{/* Demo 3 : Sticky Cursor */}
<div style={contStyle} onMouseEnter={() => CURSOR_STICKY(dispatch, 'imSticky', 'SMALL')} onMouseLeave={() => CURSOR_STICKY(dispatch, 'END')}>
<div id="imSticky" data-magnetism>
Sticky Cursor
</div>
</div>
{/* Demo 4 : Magnetic Elements */}
<div style={contStyle} onMouseEnter={() => CURSOR_MAGNETIC(dispatch, 'imMagnetic', 'SMALL')} onMouseLeave={() => CURSOR_MAGNETIC(dispatch, 'END')}>
<div id="imMagnetic" data-magnetism>
Magnet Mode
</div>
</div>
{/* Demo 6 : Video On Cursor Jello-Blob */}
<div
style={contStyle}
onMouseEnter={() => {
CURSOR_VIDEO(dispatch, 'https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4', 'MEDIUM')
}}
onMouseLeave={() => {
CURSOR_VIDEO(dispatch, 'END')
}}
>
<div>Video Blob on Cursor</div>
</div>
{/* Demo 7 : Cursor Exclusion Mode */}
<div style={contStyle} onMouseEnter={() => CURSOR_EXCLUSION(dispatch, 'START', 'LARGE')} onMouseLeave={() => CURSOR_EXCLUSION(dispatch, 'END')}>
<div data-magnetism id="imExclusion">
Exclusion Mode
</div>
</div>
{/* Demo 8 : Reveal Texts on Hover */}
<div
style={contStyle}
onMouseEnter={() => CURSOR_REVEAL(dispatch, 'START', 'imRevealing', 'SMALL')}
onMouseLeave={() => CURSOR_REVEAL(dispatch, 'END', 'imRevealing')}
>
<div style={{ overflow: 'hidden' }}>
<div data-magnetism id="imRevealing" style={{ display: 'inline-block', paddingInline: '1.75vw' }}>
Reveal Titles
</div>
</div>
</div>
{/* Demo 9 : Animated Underline on Hover */}
<div style={contStyle} onMouseEnter={() => CURSOR_UNDERLINE('START', '.underline-anim')} onMouseLeave={() => CURSOR_UNDERLINE('END', '.underline-anim')}>
<div style={{ position: 'relative' }}>
Underline Animation
<div className="underline-anim" style={underlineStyle} />
</div>
</div>
</div>
)
}
//@ Stylesheet
const baseStyle = {
width: '100vw',
height: '100vh',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
flexWrap: 'wrap',
background: 'white',
}
const contStyle = {
width: '17vw',
height: '10vw',
borderRadius: '1.5vw',
display: 'grid',
placeItems: 'center',
padding: '1.5vw',
margin: '1.5vw',
textAlign: 'center',
cursor: 'pointer',
background: 'lightgray',
}
const titleStyle = {
width: '90vw',
height: '5vw',
background: 'lightgray',
textAlign: 'center',
lineHeight: '5vw',
fontSize: '2vw',
fontWeight: 'bold',
borderRadius: '0.75vw',
}
const underlineStyle = {
position: 'absolute',
width: '100%',
height: '1px',
marginLeft: 'auto',
marginRight: 'auto',
left: 0,
right: 0,
background: 'black',
bottom: '0.5px',
}Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
If you have any feedback, please reach out to us at [email protected]
