Introduction

Pointerly is a lightweight and highly customizable library for creating interactive cursors in web interfaces. It allows you to replace the system’s default cursors with fully custom visual elements, adapting them to different contexts such as click states, text selection, or specific user interactions.

With a simple API, you can define custom cursors using HTML and SVG, as well as apply dynamic effects like text flags and chase animations. Pointerly provides flexibility to integrate unique cursors into any project, whether to highlight interactions or enhance the user’s visual experience.

• Packages
• Installation
• Setup
• Events
• Pointerly in Use
• License

Packages

• pointerly
• pointerly/react
• pointerly/vue
• pointerly/framer
• pointerly/snap

Installation

Using a package manager:

npm i pointerly

import Pointerly from 'pointerly';
import 'pointerly/css';

Using scripts:
CSS (in the )
Include the Pointerly styles inside the tag:

<!-- unpkg -->
<script src="https://unpkg.com/pointerly@1.0.3/pointerly.min.css"></script>

<!-- jsdelivr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pointerly@1.0.3/pointerly.min.css">

JS (before the closing )
Include the Pointerly JavaScript before the closing tag:

<!-- unpkg -->
<script src="https://unpkg.com/pointerly@1.0.3/pointerly.min.js"></script>

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/pointerly@1.0.3/pointerly.min.js"></script>

Setup

Basic:

var myCursor = Pointerly.init({

    cursors: {

        default: '<div class="cursor-default">👆</div>',
        grab: '<div class="cursor-default">🤚</div>',
        view: '<div class="cursor-default">👀</div>',
    },

    flags: {

        text: {
            effect: 'chase',
            render:
                `<div class="custom-cursor-flag">👽</div>`,
        }

    },
});

Custom:

var myCursor = Pointerly.init({

    cursors: {

        default:
            `<div class="custom-cursor-default">
                
                <img class="lazyload" src="assets/media/cursors/default.svg" width="" height="" />
                
            </div>`,

        pointer:
            `<div class="custom-cursor-pointer">
                
                <img class="lazyload" src="assets/media/cursors/pointer.svg" width="" height="" />
                
            </div>`,

        grab:
            `<div class="custom-cursor-grab">
                
                <img class="lazyload" src="assets/media/cursors/grab.svg" width="" height="" />
                
            </div>`,

        text:
            `<div class="custom-cursor-text">
                
                <img class="lazyload" src="assets/media/cursors/text.svg" width="" height="" />
                
            </div>`,
    },

    flags: {

        text: {
            effect: 'chase',
            render:
                `<div class="custom-cursor-flag">

                    <div class="wrapper text-color-primary">

                        <span class="text"></span>

                    </div>
                        
                </div>`,
        }

    },

    on: {

        updateCursor: (data) => {

            const text = data.elementUnder?.getAttribute('data-cursor-flag-text') || '';

            const cursorFlagText = data.container?.querySelector('.custom-cursor-flag .text');

            if (cursorFlagTexts) cursorFlagTexts.textContent = text;
        },
    },

    debug: false,
});

Pointerly in use

• Romulo in Motion by Felipe Otto

License

MIT © Felipe Otto