vue-gooey-cursor
Gooey Cursor Component for Vue 3.
Install
npm i vue-gooey-cursor
Register the component
import GooeyCursor from 'vue-gooey-cursor'
// register globally
app.component('GooeyCursor', GooeyCursor)
// or locally
export default {
components: { GooeyCursor },
// ...
}
Usage
<!-- simple -->
<GooeyCursor />
<!-- with default props -->
<GooeyCursor color="#42b883" :size="32" :length="8" hover="a, button" />
Props
color
- Optional
- Type:
String
- color of the cursor, any format accepted by css will work
size
- Optional
- Type:
Number
- width and height of the cursor in px
length
- Optional
- Type:
Number
- number of dots forming the tail of the cursor
hover
- Optional
- Type:
String
- selector string, cursor will grow and turn transparent while hoverind on these elements
Styles
For the cursor to work correctly, please apply these base styles to your page:
body {
min-width: 100vw;
min-height: 100vh;
overflow: hidden;
}
html {
cursor: none;
}
a {
cursor: none;
}
button {
cursor: none;
}
CSS Variables
Some css properties can be easily changed by setting css variables.
.gooey-cursor {
--z-index: 1000; /* default: 9999 */
--color: orange; /* default: #42b883 */
}