Skip to main content

Methods

note

All Module methods are available in this class.

attachCursor​

Registers a cursor type and appends its element into the cursor's inner container.

Each cursor type is identified by a unique type string and can later be activated when hovering elements.

See ICursorType.

const cursor = new Cursor();

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

attachHover​

Registers a hoverable element and binds cursor interactions to it.

While hovering the element, the cursor can:

  • change size,
  • snap to the element center,
  • apply sticky behavior (with configurable amplitude and friction),
  • switch cursor type.

Returns a cleanup function that removes all listeners and bindings.

For the full configuration options, see ICursorHoverElementProps.

const cursor = new Cursor();

const remove = cursor.attachHover({
  element: document.getElementById('hover-element'), // hoverable element
  // optional: separate event emitter, different from visual element
  emitter: document.getElementById('hover-area'),
  type: 'some_type',
  snap: true,
  width: 'auto',
  height: 'auto',
  padding: 10,
  sticky: true,
  // smoothness of sticky follow (defaults to cursor lerp)
  stickyLerp: 0.15,
  // make sticky element smoothly return to origin
  stickyFriction: 0.2,
  // sticky movement range; supports number, 'auto', or { x, y } with CSS units
  stickyAmplitude: { x: '2rem', y: 'auto' },
});

// Remove interaction
remove();

render​

Usually not required, as rendering is handled automatically, but can be useful after manual state changes.

const cursor = new Cursor();

cursor.render();

updateProps​

Dynamically updates cursor instance properties at runtime.

const cursor = new Cursor();

cursor.updateProps({
  width: 100,
  height: 100,
});

destroy​

Destroys the cursor instance and cleans up resources.

const cursor = new Cursor();

cursor.destroy();