Haspr Cursor

The Magnificent Cursor used in Haspr Website

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

INSTALLATION

NPM

1npm install haspr-cursor

YARN

1yarn add haspr-cursor

Cursor Usage

Works on ReactJS and NextJS

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

1import HasprCursor from 'haspr-cursor' // Import Wrapper
2import 'haspr-cursor/dist/cursor.css' // Import Style sheet
3
4// Import and Use These at the top level of your project
5// Usually in _app.js, app.js or index.js
6
7export default function App() {
8  return (
9    <>
10      <HasprCursor>{/* All Other Code */}</HasprCursor>
11    </>
12  )
13}

2. Use it anywhere in your app

Import :

1import { DispatchCursor, CURSOR_SHOW, CURSOR_STICKY } from 'haspr-cursor'

In Order to Dispatch Animations use Functions as Follows:

1const dispatch = DispatchCursor()

Important: Make sure to add "data-magnetism" attribute on div or any other element when using sticky or magnetic cursor

1<div data-magnetism id="magnetize-me" onMouseEnter={() => CURSOR_STICKY(dispatch, 'magnetize-me')}>
2  I'm some div
3</div>

Cursor Actions

1. Functions and their usage

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

2. Parameter Description :

• 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

Extra Internal Functionality

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

Complete Usage Demo :

Copy and paste this snipper to test everything

1import {
2  DispatchCursor,
3  CURSOR_SHOW,
4  CURSOR_HIDE,
5  CURSOR_COLOR,
6  CURSOR_TEXT,
7  CURSOR_EXCLUSION,
8  CURSOR_STICKY,
9  CURSOR_MAGNETIC,
10  CURSOR_VIDEO,
11  CURSOR_REVEAL,
12  CURSOR_UNDERLINE,
13} from 'haspr-cursor'
14//$ Importing Our Functions
15
16export default function CursorDemo() {
17  //` The Cursor Action Dispatcher initialized
18  const dispatch = DispatchCursor()
19
20  //& VIEW
21  return (
22    <div onMouseEnter={CURSOR_SHOW} onMouseLeave={CURSOR_HIDE} style={baseStyle}>
23      {/* Title */}
24      <div style={titleStyle}>Haspr Cursor Demo</div>
25
26      {/* Demo 1 : Change Cursor Color */}
27      <div style={contStyle} onMouseEnter={() => CURSOR_COLOR('RED')} onMouseLeave={() => CURSOR_COLOR('END')}>
28        <div>Change Cursor Color</div>
29      </div>
30
31      {/* Demo 2 : Apply Text to Jello-Blob */}
32      <div style={contStyle} onMouseEnter={() => CURSOR_TEXT(dispatch, 'hi fam!', 'GREEN')} onMouseLeave={() => CURSOR_TEXT(dispatch, 'END')}>
33        <div>Show Green Jelly Blob</div>
34      </div>
35
36      {/* Demo 3 : Sticky Cursor */}
37      <div style={contStyle} onMouseEnter={() => CURSOR_STICKY(dispatch, 'imSticky', 'SMALL')} onMouseLeave={() => CURSOR_STICKY(dispatch, 'END')}>
38        <div id="imSticky" data-magnetism>
39          Sticky Cursor
40        </div>
41      </div>
42
43      {/* Demo 4 : Magnetic Elements */}
44      <div style={contStyle} onMouseEnter={() => CURSOR_MAGNETIC(dispatch, 'imMagnetic', 'SMALL')} onMouseLeave={() => CURSOR_MAGNETIC(dispatch, 'END')}>
45        <div id="imMagnetic" data-magnetism>
46          Magnet Mode
47        </div>
48      </div>
49
50      {/* Demo 6 : Video On Cursor Jello-Blob */}
51      <div
52        style={contStyle}
53        onMouseEnter={() => {
54          CURSOR_VIDEO(dispatch, 'https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4', 'MEDIUM')
55        }}
56        onMouseLeave={() => {
57          CURSOR_VIDEO(dispatch, 'END')
58        }}
59      >
60        <div>Video Blob on Cursor</div>
61      </div>
62
63      {/* Demo 7 : Cursor Exclusion Mode */}
64      <div style={contStyle} onMouseEnter={() => CURSOR_EXCLUSION(dispatch, 'START', 'LARGE')} onMouseLeave={() => CURSOR_EXCLUSION(dispatch, 'END')}>
65        <div data-magnetism id="imExclusion">
66          Exclusion Mode
67        </div>
68      </div>
69
70      {/* Demo 8 : Reveal Texts on Hover */}
71      <div
72        style={contStyle}
73        onMouseEnter={() => CURSOR_REVEAL(dispatch, 'START', 'imRevealing', 'SMALL')}
74        onMouseLeave={() => CURSOR_REVEAL(dispatch, 'END', 'imRevealing')}
75      >
76        <div style={{ overflow: 'hidden' }}>
77          <div data-magnetism id="imRevealing" style={{ display: 'inline-block', paddingInline: '1.75vw' }}>
78            Reveal Titles
79          </div>
80        </div>
81      </div>
82
83      {/* Demo 9 : Animated Underline on Hover */}
84      <div style={contStyle} onMouseEnter={() => CURSOR_UNDERLINE('START', '.underline-anim')} onMouseLeave={() => CURSOR_UNDERLINE('END', '.underline-anim')}>
85        <div style={{ position: 'relative' }}>
86          Underline Animation
87          <div className="underline-anim" style={underlineStyle} />
88        </div>
89      </div>
90    </div>
91  )
92}
93
94//@ Stylesheet
95const baseStyle = {
96  width: '100vw',
97  height: '100vh',
98  display: 'flex',
99  justifyContent: 'center',
100  alignItems: 'center',
101  flexDirection: 'row',
102  flexWrap: 'wrap',
103  background: 'white',
104}
105
106const contStyle = {
107  width: '17vw',
108  height: '10vw',
109  borderRadius: '1.5vw',
110  display: 'grid',
111  placeItems: 'center',
112  padding: '1.5vw',
113  margin: '1.5vw',
114  textAlign: 'center',
115  cursor: 'pointer',
116  background: 'lightgray',
117}
118
119const titleStyle = {
120  width: '90vw',
121  height: '5vw',
122  background: 'lightgray',
123  textAlign: 'center',
124  lineHeight: '5vw',
125  fontSize: '2vw',
126  fontWeight: 'bold',
127  borderRadius: '0.75vw',
128}
129
130const underlineStyle = {
131  position: 'absolute',
132  width: '100%',
133  height: '1px',
134  marginLeft: 'auto',
135  marginRight: 'auto',
136  left: 0,
137  right: 0,
138  background: 'black',
139  bottom: '0.5px',
140}

Contributing

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.

License

MIT

Feedback

If you have any feedback, please reach out to us at contact@haspr.in

🔗 Links