vue-gooey-cursor

Gooey Cursor Component for Vue 3.

Usage no npm install needed!

<script type="module">
  import vueGooeyCursor from 'https://cdn.skypack.dev/vue-gooey-cursor';
</script>

README

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 */
}