Props

Static Props

Static properties are set during initialization and cannot be modified later.

container

• Type: Element | window
• Default: window
• The container where the custom cursor is active.
  Use window for full-window activation.

const cursor = new Cursor({
  container: document.getElementById('cursor-container'),
});

hideNative

• Type: boolean
• Default: false
• Hides the native cursor if set to true.

const cursor = new Cursor({
  hideNative: true,
});

behavior

• Type: "default" | "path"
• Default: "default"
• Defines how the cursor follows the native pointer
  default — Cursor interpolates toward the current pointer position.
  path — Cursor follows a smooth SVG path repeating the pointer trajectory.
  Use path for decorative or expressive cursor effects.

const cursor = new Cursor({
  behavior: 'path',
});

transformModifier

• Type: (coords: ICursorFullCoords) => string
• Default:

  (coords) => `translate(${coords.x}px, ${coords.y}px)`;

• Modifier for the cursor transform.

const cursor = new Cursor({
  transformModifier: (coords) =>
    `translate(${coords.x}px, ${coords.y}px) rotate(${coords.angle}deg)`,
});

Mutable Props

Mutable properties can be updated at runtime using .updateProps().

Adaptive props

To apply different values by viewport or device, use Responsive with this component as the source. Props will update automatically when breakpoints change.

enabled

• Type: boolean
• Default: true
• Enables or disables the custom cursor interactions.

const cursor = new Cursor({
  enabled: false,
});

// change value
cursor.updateProps({
  enabled: true,
});

width

• Type: number
• Default: 50
• The initial width of the custom cursor. Supports css units like px, rem, vw, vh, svh.

const cursor = new Cursor({
  width: 50,
});

// change value
cursor.updateProps({
  width: '3rem',
});

height

• Type: number
• Default: 50
• The initial height of the custom cursor. Supports css units like px, rem, vw, vh, svh.

const cursor = new Cursor({
  height: 50,
});

// change value
cursor.updateProps({
  height: '3rem',
});

lerp

• Type: number
• Default: 0.2
• Linear interpolation factor for smooth cursor movement.
  The value must be between 0 and 1, with higher values indicating faster movement.

const cursor = new Cursor({
  lerp: 0.2,
});

// change value
cursor.updateProps({
  lerp: 0.05,
});

autoStop

• Type: boolean
• Default: true
• Automatically stops the internal requestAnimationFrame loop when cursor position and size reach target values.
  Set to false if you need continuous rendering (e.g. for shaders or custom effects).

const cursor = new Cursor({
  autoStop: true,
});

// change value
cursor.updateProps({
  autoStop: false,
});