Skip to main content

Accessors

note

All Module accessors are available in this class.

container​

Type: Element | Window

The cursor container.

const cursor = new Cursor();

cursor.container; // returns cursor container

coords​

Type: { height: number; width: number; x: number; y: number; }

The current interpolated cursor state.
These values are smoothed over time using interpolation and are intended for rendering and animation logic.

const cursor = new Cursor();

cursor.coords.x;
cursor.coords.y;
cursor.coords.width;
cursor.coords.height;
cursor.coords.angle;
cursor.coords.velocity;

domContainer​

Type: HTMLElement

Returns the DOM parent for the cursor element.

const cursor = new Cursor();

cursor.domContainer; // cursor DOM parent

hoveredElement​

Type: undefined | CursorHoverElement

Contains information about the currently hovered attached element.

  • Available only while hovering an element registered via .attachHover()
  • Automatically resets to undefined when no interactive element is hovered

Works for attached elements only. See .attachHover().

const cursor = new Cursor();

cursor.hoveredElement.element;
cursor.hoveredElement.type;
cursor.hoveredElement.snap;
cursor.hoveredElement.width;
cursor.hoveredElement.height;
cursor.hoveredElement.padding;
cursor.hoveredElement.sticky;
cursor.hoveredElement.stickyX;
cursor.hoveredElement.stickyY;

inner​

Type: HTMLElement

The inner element of the custom cursor. Should be used for setting additional styling.

const cursor = new Cursor();

cursor.inner; // HTMLElement

outer​

Type: HTMLElement

The outer element representing the visual cursor.

const cursor = new Cursor();

cursor.outer; // HTMLElement

targetCoords​

Type: { height: number; width: number; x: number; y: number }

The raw, non-interpolated cursor state.
Represents the immediate result of pointer movement or hover state changes.

const cursor = new Cursor();

cursor.targetCoords.x;
cursor.targetCoords.y;
cursor.targetCoords.width;
cursor.targetCoords.height;
cursor.targetCoords.angle;
cursor.targetCoords.velocity;

path​

Type: SVGPathElement

An SVG <path> element that stores a smoothed curve of the user’s pointer movement. Available only when behavior: "path" is enabled.

Read more / Demo

const cursor = new Cursor();

cursor.path; // SVGPathElement