Get Elements Hive

Morph Cursor

An incredibly versatile custom cursor extension that allows you to turn mouse movement into a living entity. You can configure the cursor to change styles, scale, or show any SVG ( even animated ones ) when the cursor enters any element on the page of your choosing.

 

Notes:

Unlike other custom cursors in Elements Hives, given the versatility of this extension, you don’t need to add separate custom cursors per section when you want to have different styling in different sections. Just enable the extension once in any section on the page, then add a new Morph Target with the required styling for the section you want to target.

Morphing Cursor

  • Style: The default cursor style
  • Color: The default cursor color
  • Cursor Size: The default cursor size
  • Default Scale Factor on Morph Targets: By default, the cursor has a scale of 1, this setting dictates how big the cursor will get when it enters/hovers over the morph targets
  • Morph Targets: The list of morph targets. A morph target can be any element on the page and it is referenced using a CSS selector
    • CSS Selector: A valid CSS selector for an element on the page
    • Override Default Scale: Whether to override the default scale when the cursor enters this morph target
    • Custom Scale Factor: The scale factor that should be applied
    • Style: If you want to change the default Cursor Style, you can change it here
    • Color: if you want to change the default color, you can change it here
    • Enable Icon: Whether to show an icon or SVG file on the cursor
    • Icon: The icon/svg to show
    • Icon Size: The icon/svg size
    • Icon Color: The icon color