Skip to main content

Cursor

A customizable smooth cursor component with hover interactions.

The cursor is rendered independently from the native pointer and smoothly interpolates its position, size, and appearance based on user input and hovered elements.

Basic Demo​

More demos​

To explore more demos, click here.

Advantages​

  • Smooth interpolated movement
  • Dynamic size
  • Multiple cursor types
  • Hover-based interactions
  • Click recognition
  • Optional native cursor hiding

Initialization​

Initialize the cursor:

note
  • The cursor starts rendering automatically when enabled: true.
  • The native cursor is not hidden by default — use hideNative: true if needed.
  • Cursor visuals are created internally; styling should be applied via .inner or .outer.
import { Cursor } from "vevet";

const cursor = new Cursor({
  container: window,
  width: 60,
  height: 60,
  lerp: 0.1,
  behavior: "default",
});

Add hoverable elements:

cursor.attachHover({
  element: document.getElementById('hover-element'),
  width: 200,
  height: 100,
});

Without size change:

cursor.attachHover({
  element: document.getElementById('hover-element'),
  width: null,
  height: null,
});

Snap cursor:

cursor.attachHover({
  element: document.getElementById('hover-element'),
  snap: true,
});

Custom cursor type:

cursor.attachCursor({
  element: document.getElementById('cursor-type'),
  type: 'some_type', // unique type identifier
});

// and apply it to an element when hovered
cursor.attachHover({
  element: document.getElementById('hover-element'),
  type: 'some_type', // unique type identifier
});

Destroy the cursor:

cursor.destroy();

Best Practices​

  • Use Cursor as a visual layer, not as a logic controller.
  • Prefer styling via .inner and .outer instead of replacing DOM nodes.
  • Keep lerp values low (0.05–0.2) for smooth motion.
  • Use attachHover() only for interactive elements to avoid unnecessary listeners.
  • Disable autoStop only when continuous rendering is required.
  • Do not use Cursor on mobile devices — custom cursors negatively impact usability and performance on touch screens.