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>