vue-magic-cursor

a customizable animated cursor for VueJS Demo Github Page

How to use

Install package

npm install vue-magic-cursor

Import and Setup

You can use MagicCursor either as a plugin (globally) or as a component (locally).

Option 1: Use as a Plugin (Global)

import MagicCursor from 'vue-magic-cursor'
import 'vue-magic-cursor/style.css' // optional feel free to add your own styling

const app = createApp(App)
app.use(MagicCursor)
app.mount('#app')

Option 2: Use as a Component (Local)

import { MagicCursor } from 'vue-magic-cursor'
import 'vue-magic-cursor/style.css' // optional feel free to add your own styling

export default {
  components: {
    MagicCursor
  }
}

Use in Template

<template>
  <div>
    <MagicCursor />
  </div>
</template>

Configurations

Custom cursor

The MagicCursor component provides a scoped slot with the following props:

• isStopped: A boolean indicating whether the cursor is stopped.
• isHover: A boolean indicating whether the cursor is hovering over an element.

You may use those values for hover effects, idle effects, etc.

<MagicCursor>
  <template v-slot:default="{ isStopped, isHover }">
    <div>
      <!-- custom cursor here -->
    </div>
  </template>
  <template #follower
    v-slot:follower="{ isStopped, isHover }"
  >
    <!-- Custom cursor follower here -->
  </template>
</MagicCursor>

Props

The MagicCursor component accepts the following props:

Prop Name	Type	Default Value	Description
cursorVelocity	Number	0.5	The velocity of the cursor movement.
followerVelocity	Number	0.1	The velocity of the follower movement.
idleTiming	Number	1500	The time in milliseconds before the cursor is considered idle.
showFollower	Boolean	true	Whether to show the follower cursor.
showCursor	Boolean	true	Whether to show the main cursor.
elementsToHover	Array	['a', 'button:not([disabled])', 'input:not([disabled])']	The elements that trigger hover state.

Example Usage

<template>
  <MagicCursor
    :cursor-velocity="0.5"
    :follower-velocity="0.2"
    :idle-timing="2000"
    :show-follower="true"
    :show-cursor="true"
    :elements-to-hover="['a', 'button', 'input']"
  />
</template>

<script>
import MagicCursor from 'vue-magic-cursor';

export default {
  components: {
    MagicCursor
  }
};
</script>