vue-gooey-cursor
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

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

Package Sidebar

Install

npm i vue-gooey-cursor

Weekly Downloads

0

Version

1.0.3

License

MIT

Unpacked Size

45.8 kB

Total Files

10

Last publish

Collaborators

  • thetarnav.