Parameterizable animated cursor for vue 3.




npm install sf-vue-animated-cursor


Two things can be called from the plugin.

  • basic cursor, which can be easily parameterized and with which you can build according to your own taste
  • default cursor, which is a built-in cursor that can only set the target, teleportTo, watch properties


  • basic: if you want to use the built-in cursor instead of the basic cursor, you only need to specify ‘basic: false’ in the options


import { createApp } from 'vue'
import App from './App.vue'
import SfVueAnimatedCursor from 'sf-vue-animated-cursor'

const app = createApp(App)

app.use(SfVueAnimatedCursor, { basic: false });


Then it can be placed anywhere, but make sure that the target value (by default #app) is valid.



<template lang="pug">



Tip: With the teleport property, you can set where the cursor should be located in the html.


All properties can be used only with the basic cursor. For the default cursor, you can only set the target, teleportTo, and watch properties.

Name Type Description Possible values Defaults
teleportTo String teleports the cursor to the specified selector any html element body
target String the cursor works within the specified selector any html elemen #app
show Boolean cursor visibility true, false true
watch Boolean if the emitted values are not needed, set it to false true, false true
width Number cursor width any number 6px
height Number cursor height any number 6px
bgColor String cursor background color any color #657786
borderColor String cursor border color any color #657786
borderWidth Number cursor border width any number 1px
borderRadius Number cursor border radius any number 50%
slowDown Number slowing down the speed of the animated cursor any number 0s
hoverable String the class name that activates the hover effect any html elemen hoverable
hoverAnimation Boolean hover animation on/off true, false true
clickAnimation Boolean click animation on/off true, false true
mixBlendMode String mix blend mode any valid css value difference
scaleOnClick Number the scale value of the click event any number 2
scaleOnHoverClick Number the scale value of the click event, while hovering any number 2
scaleOnHover Number the scale value of the hover event any number 3
opacityOnHover Number the opacity value of the hover event any number 0.5


Event Emited values
move position x, position y, cursorvisibility
click true, false
hover true, false


Released under MIT by Schön Ferenc.


View Github