An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible

Usage no npm install needed!

<script type="module">
  import luxdamoreVueCursorFx from 'https://cdn.skypack.dev/@luxdamore/vue-cursor-fx';


🎉 Vue Cursor Fx

Code Quality Downloads Dependencies Version Donate

An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible


This package is available on npm and yarn.

    # Deps
    npm install --save @luxdamore/vue-cursor-fx

    # Or
    yarn add @luxdamore/vue-cursor-fx


As component

    // Global component and css
    import { CursorFx } from '@luxdamore/vue-cursor-fx';
    import '@luxdamore/vue-cursor-fx/dist/CursorFx.css';

    // Install

    // Or, in a .vue file
    import { CursorFx } from '@luxdamore/vue-cursor-fx';

    export default {
        components: {
            'cursor-fx': CursorFx,

    <style src="@luxdamore/vue-cursor-fx/dist/CursorFx.css"></style>

As a global plugin

    // Plugin
    import CursorFx from '@luxdamore/vue-cursor-fx';
    import '@luxdamore/vue-cursor-fx/dist/CursorFx.css';

    // Install

Browser's way

    <!doctype html>

            <!-- CursorFx styles -->

            <!-- Old way -->
            <link rel="stylesheet" href="https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.css" />
            <!-- end old way -->

            <!-- New way -->
            <link rel="preload" href="https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.css" as="style" onload="this.rel='stylesheet'" />
            <link rel="preload" href="https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.umd.min.js" as="script" />
            <!-- end new way -->

            <!-- end CursorFx styles -->


                Others script (ex. VueJs) and html.

            <!-- CursorFx script -->
            <script src="https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.umd.min.js"></script>
            <!-- end CursorFx script -->



Use one time in the main file of your project or in every views, where you want it.

        title="Special button"
        Add `data-cursor-hover` to an every html elements that you want to see the cursor bigger on hover

        title="Special button"
        Add `data-cursor-hidden` to an every html elements that you want to hide the cursor on hover

        title="Special button"
        Add `data-cursor-mix-blend-mode` to an every html elements that you want to change the mix-blend-mode type.

    <cursor-fx />


N.B.: the cursor is not activated on touchscreen devices.


    # Available
    slot="default"  # Add some content in the middle of the cursor




Attribute Type Default value About
config Object {} The default options applied to cursor, see below the BASE_CONFIG
color String #333333 Color for the cursor
color-hover String #333333 Color, on hover, for the cursor
outside-size String null The size of outer circle
inside-size String null The size of inner dot
shape String null Only available shapes are circle and square
delay String, Number 60 Activate cursor after x seconds
mix-blend-mode String null Set the global mix-blend-mode style
force-custom-slot Boolean false Show or hide the internal default slot
allow-on-mobile Boolean false Allow the cursor on mobile devices
hide-outside Boolean false Hide outer circle
hide-inside Boolean false Hide inner dot
disabled Boolean false Disable the activation of the cursor

    const BASE_CONFIG = {
        lerps: {
            dot: 1,
            circle: 0.18,
            custom: 0.23,
        scale: {
            ratio: 0.18,
            min: 0.5,
            max: 1,
        opacity: 0.1,


    <!-- component.vue -->

            <!-- start it, later -->
            <cursor-fx ref="cursor" disabled />


    <!-- Component -->
        export default {
            mounted() {

                // start it, on mounted, or wherever you want

            methods: {
                others() {

                    // destroy

                    //-> refresh automate: `destroy()` and `start()`




    <!-- App.vue -->


            <cursor-fx />


  • For the entire website: place the component in the desired layouts (ex. layouts/default.vue);
  • For some pages only: place the component in the desired pages (ex. pages/index.vue).

    <!-- layout/default.vue -->

                <nuxt />

            <cursor-fx />


👩🏻‍💻👨🏻‍💻 Development

  1. Clone the repository:
    • git clone https://github.com/LuXDAmore/vue-cursor-fx.git;
  2. Install dependencies:
    • yarn install (or npm install);
  3. Start a development server:
    • yarn dev (or npm run dev);
  4. Extra, build the documentation (Github Pages):
    • yarn build (or npm run build);
    • the content is automatically generated into the /docs folder.

🐞 Issues

Please make sure to read the issue reporting checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

📝 Discussions

We're using Github discussions as a place to connect with other members of our community. You are free to ask questions and share ideas, so enjoy yourself.

👥 Contribution

Please make sure to read the contributing guide before making a pull request.

📖 Changelog

Details changes for each release are documented in the release notes.

🆓 License

MIT License // Copyright (©) 2019-now Luca Iaconelli

💼 Hire me


💸 Are you feeling generous today?

If You want to share a beer, we can be really good friends 😄

Paypal // Patreon // Ko-fi

It's always a good day to be magnanimous - cit.

💡 Lighthouse

Lighthouse audit score

💘 Inspired by

CustomCursors by Tympanus