Custom Cursors

Custom Cursors

The Custom Cursor shortcode replaces the default pointer with an animated follower dot, adding a modern, tactile feel to creative and portfolio sites. It is enabled at the site level and only activates on devices with a fine pointer (a mouse), so touch users keep the native experience.

Structure

The plugin builds three nested elements inside the page wrapper if they are not already present:

• .cnvs-cursor: the cursor root that follows the mouse.
• .cnvs-cursor-follower: the larger trailing ring.
• .cnvs-cursor-dot: the small precise dot.

You normally do not author these by hand; the module creates them. You just enable the feature and use the interaction classes below.

Interaction states

The cursor reacts automatically to hoverable elements:

• Hovering any a or button adds cnvs-cursor-action to the cursor (grow/highlight state).
• Hovering an element with the class cursor-disable adds cnvs-cursor-disabled, hiding the custom cursor for that region (useful over inputs, videos, or maps).

<!-- The custom cursor grows automatically over links and buttons -->
<a href="#" class="button">Hover me</a>

<!-- Disable the custom cursor over a specific area -->
<div class="cursor-disable">
    <video controls src="video.mp4"></video>
</div>

Toggling a cursor style at runtime

You can add your own modifier classes to .cnvs-cursor to switch looks. The demo toggles a bordered style on a button click:

<a href="#" class="button change-cursor-style">Toggle Cursor Border</a>

<script>
    document.querySelector('.change-cursor-style').addEventListener('click', function(e){
        e.preventDefault();
        document.querySelector('.cnvs-cursor').classList.toggle('cnvs-cursor-border');
    });
</script>

Behavior notes

• The follower is positioned with a translate3d transform updated on each animation frame, so movement stays smooth and GPU-accelerated.
• On coarse pointers (touch devices) the module returns early and no custom cursor is created, so mobile users are unaffected.
• The cursor elements are prepended to the page wrapper, so they sit above page content.

Tips

• Apply cursor-disable to any interactive media (video players, maps, embedded iframes) where the native cursor is clearer.
• Because link and button hover states are automatic, you rarely need extra markup: just enable the feature and the cursor responds.
• Add custom modifier classes (like cnvs-cursor-border) and style them in your SCSS to match your brand.
• The effect is decorative, so it gracefully does nothing on touch devices, keeping accessibility intact.