WP Custom Cursors

Say no to ordinary cursors!

Introduction

WP Custom Cursor is a robust WordPress plugin that allows you to easily enhance your website’s interactivity by customizing the cursor design.

First of all, Thank you so much for purchasing this plugin and for being my loyal customer. You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how to configure this plugin properly.

Requirements

You will need the following to use this plugin.

  1. WordPress: (at least 6.0.2, stable 6.7)
  2. PHP: (7.4 or higher)

This plugin is cross-theme compatible, ensuring it works seamlessly with any WordPress theme, regardless of design or layout.

Getting Started

How to Install the WP Custom Cursors Plugin

You can install the WP Custom Cursors plugin in two ways:

  1. Installing Free Version From the WordPress Repository
  2. Installing Premium Version Purchased From CodeCanyon

1. Installing Free Version From the WordPress Repository:

  1. Log in to your WordPress Dashboard.
  2. Go to Plugins → Add New.
  3. In the search bar, type "WP Custom Cursors".
  4. Locate the plugin and click Install Now.
  5. Once installed, click Activate.
  6. The plugin is now ready to use! You can configure the cursor settings from the Custom Cursors menu on the left sidebar of your dashboard.
plugin installation

2. Installing Premium Version Purchased From CodeCanyon:

  1. Download the ZIP File From CodeCanyon:
    • After purchasing the plugin from CodeCanyon, download the plugin's ZIP file to your computer.
    • Important: Extract the downloaded ZIP file. Inside the extracted folder, you will find another ZIP file named wp-custom-cursors.zip. This is the file you need to upload as a new plugin.
  2. Log in to your WordPress Dashboard.
  3. Go to Plugins → Add New.
  4. Click on Upload Plugin at the top.
  5. Select the wp-custom-cursors.zip file from the extracted folder.
  6. Click Install Now and wait for the installation to complete.
  7. Once installed, click Activate Plugin.
  8. The plugin is now active, and you can access its settings from the Custom Cursors menu on the left of your dashboard.
upload zip file

Important Notes:

  • This plugin is cross-theme compatible, which means it will work seamlessly with any WordPress theme, regardless of design or layout.
  • If you encounter any issues during installation, make sure your WordPress version is up-to-date and that there are no conflicts with other plugins.

You're all set! Enjoy customizing your website's cursor with WP Custom Cursors!

Add Cursor To The Page

Accessing the Settings Page

  1. Navigate to the Plugin Settings:
    • In your WordPress dashboard, locate and click on the Custom Cursors menu on the left sidebar.
    • This will take you to the plugin's settings page.
add new cursor

Adding a New Cursor

  1. Start Adding a Cursor:
    • On the settings page, click on the Add Cursor button.
  2. Browse Available Cursors:
    • A list of available cursors will be displayed.
    • Hover over each cursor to see a menu icon () at the bottom right corner.
  3. Select and Add Cursor to Your Site:
    • Click on the menu icon to reveal a dropdown menu.
    • Select Add to the Site from the dropdown options.
add cursor to the site

Choose Cursor Placement

Once you click Add to the Site, a popup will appear with a dropdown menu for placement options:

  • Entire Site:
    • Selecting this option will apply the cursor to the entire website.
  • Specific Section:
    • This option allows you to add the cursor to a specific section of your site using a class or ID selector.
    • Class Selector: Use a dot (.) before the class name (e.g., .custom-cursor).
    • ID Selector: Use a hash (#) before the ID name (e.g., #header-cursor).
Example: If you enter .custom-cursor, the cursor will be applied to every section with the class custom-cursor.
select where on the page to add the cursor

Note on Using Classes and IDs for Cursor Placement

When using WP Custom Cursor to add cursors to specific sections of your website, it's important to understand how classes and IDs work to ensure proper functionality and avoid conflicts.

Important Considerations:

  1. Avoid Overlapping Sections:
    • Do NOT add a cursor to a section that is within another section that already has a cursor applied.
    • Example: If you add a cursor to the <body> or a main container, avoid adding another cursor to child sections within it.
    • Doing this can cause conflicts, and the cursor might not work as expected.
  2. Be Cautious with Class Selectors:
    • If you use a class selector (e.g., .custom-cursor), ensure this class is not used in multiple places unintentionally.
    • Tip: Use specific and unique class names to avoid conflicts with existing styles or scripts.
  3. Watch Out for Dynamic Classes:
    • Some themes or plugins dynamically generate classes. Using these as selectors can lead to inconsistent cursor behavior.
    • To avoid issues, use custom classes or IDs that are not influenced by other plugins or theme scripts.
  4. Priority of IDs Over Classes:
    • In CSS, IDs have higher specificity than classes.
    • If you add a cursor using an ID selector (e.g., #header-cursor), it will override any class-based cursors within that section.
    • Plan your IDs and classes strategically to prevent unexpected overrides.

Best Practices:

  • Always test the cursor on various pages to make sure there are no conflicts.
  • If something doesn’t work as expected, check for overlapping cursor rules or conflicts with your theme's styles.
  • Keep your class and ID names unique and meaningful to maintain clean and manageable code.

By following these guidelines, you can effectively use the WP Custom Cursor plugin without running into issues related to overlapping selectors or conflicts with theme styles.

Be careful when using IDs

In HTML, IDs must be unique across the entire page. Each element should have a unique identifier. If multiple sections share the same ID, the cursor effect will only apply to the first occurrence of that ID, as browsers select the first matching element.

Tip: Always ensure that IDs are unique to avoid unexpected behavior with the WP Custom Cursor plugin.

Customizing The Cursors

To customize a cursor, click on the menu icon () located at the bottom left of the cursor you want to modify. Then, select Customize from the dropdown menu. A popup will appear with a customization form. Adjust the settings as desired, and once you're satisfied with the changes, click the Save button. Your cursor is now customized!

customize cursor
Note: Each cursor has a unique set of customization options. Additionally, every cursor comes with a default hover cursor. In the Cursor tab, you can customize the normal cursor, while in the Hover tab, you can adjust the hover cursor.

Hover Selector Explained

The Hover Selector specifies the elements on which the hover cursor will appear. This means that when you hover over elements defined in the hover selector, the hover cursor will be displayed. You can also choose to disable the default cursor separately for both the normal cursor and the hover cursor.

always set units
Important Note:

When customizing cursor values, be cautious about adding the appropriate units. Some properties require units like px for pixels or % for percentages. Refer to the default values and their units to understand the correct structure. For example, width and height typically use px units. Maintaining consistency with the default value/unit format helps prevent conflicts and ensures proper functionality.

Preview Cursor

To see how a cursor looks on the front end of your website, click on the menu icon () located at the bottom right corner of the cursor, then select Preview from the dropdown menu. This allows you to preview the cursor's appearance and functionality before adding it to your site.

preview cursor
Tip: You can use the preview feature after customizing a cursor to ensure it meets your design requirements. Once you're satisfied with the look and behavior of the cursor, you can proceed to add it to the desired section of your website.

Resetting a Cursor Customization

To reset any customizations made to a cursor, click on the menu icon () and select Reset from the dropdown menu. This action will remove all the changes you've made and return the cursor to its default style.

resetting the cursor
Note: Resetting the cursor will undo any custom adjustments, so make sure you are certain before proceeding. The cursor will revert to its original appearance as provided by the plugin.

Managing Added Cursors

After adding a cursor to your page, you can view all the added cursors by navigating to the Custom Cursor menu on the left. Here, you will see a list of all the cursors currently active on your site.

managing added cursors

From this page, you have the option to edit the cursor settings or remove the cursor from your site.

edit added cursor
Important Note: If you remove a cursor from the page, all customizations associated with that cursor will also be deleted. If you decide to add the cursor again later, you will need to redo the customizations.

Cursors

Zephricon

Zephricon

The Zephricon cursor consists of two primary elements: an "outer" circle and an "inner" circle. You can customize the appearance and behavior of each of these elements, both in their normal state and when hovering over specific elements.

Customizing the Normal Cursor State (cursor)

The cursor object controls the appearance and behavior of the cursor when it's not hovering over any specified elements.

Outer Circle (outer) Properties

The outer object contains CSS properties to style the outer circle of the cursor.

Property Description Example
width Width of the outer circle. '30px'
height Height of the outer circle. '30px'
borderWidth Width of the border. 1 (numeric value in pixels)
borderColor Color of the border. '#000000' (black)
borderStyle Style of the border. 'solid', 'dashed', 'dotted', etc.
opacity Transparency of the outer circle. 1 (fully opaque), 0.5 (50% transparent)
borderRadius Rounded corners of the outer circle. Use '50%' for a perfect circle. '50%'
boxShadow Adds shadow effects to the cursor. '0 2px 4px rgba(0, 0, 0, 0.2)'
backgroundColor Background color of the outer circle. 'transparent', '#FFFFFF' (white)
blendingMode Specifies the blending mode (e.g., 'normal', 'multiply'). See CSS documentation for available modes. 'normal'
transitionDuration Duration of the transition effect. Affects how smoothly the cursor changes its appearance and movement. '0.2s'
transitionTimingFunction The easing function to use for the transition (e.g., 'ease-out', 'linear'). 'ease-out'
zIndex The stacking order of the element. Ensure it's high enough to be visible above other elements. '99'


Inner Circle (inner) Properties

The inner object contains CSS properties to style the inner circle of the cursor.

Property Description Example
width Width of the inner circle. '4px'
height Height of the inner circle. '4px'
backgroundColor Background color of the inner circle. '#000000' (black)
opacity Transparency of the inner circle. 1 (fully opaque), 0.5 (50% transparent)
borderRadius Rounded corners of the inner circle. Use '50%' for a perfect circle. '50%'
blendingMode Specifies the blending mode (e.g., 'normal', 'multiply'). See CSS documentation for available modes. 'normal'
transitionDuration Duration of the transition effect. Affects how smoothly the cursor changes its appearance and movement. '0s'
transitionTimingFunction The easing function to use for the transition (e.g., 'ease-out', 'linear'). 'ease-out'
zIndex The stacking order of the element. Ensure it's high enough to be visible above other elements. '99'

Options (options) (Cursor)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it. This is only for the normal state (cursor) false (hides the default cursor), true (shows the default cursor)



Customizing the Hover State (hover)

The hover object controls the appearance and behavior of the cursor when it's hovering over specific elements.

Outer Circle (outer) Properties (Hover)

These properties are the same as the normal state outer properties, but they apply only when the cursor is hovering over the specified element.

Important Additional Property:

Property Description Example
snap Determines whether the outer circle of the cursor should snap around the element being hovered over true (snap around hovered element), false (default behavior- no snap)

See the "Outer Circle (outer) Properties" section above for details on the other properties.

Inner Circle (inner) Properties (Hover)

These properties are the same as the normal state inner properties, but they apply only when the cursor is hovering over the specified element.

See the "Inner Circle (inner) Properties" section above for details.

Options (options) (Hover)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it on hover. false (hides the default cursor), true (shows the default cursor)
hoverSelector A CSS selector that specifies which elements should trigger the hover effect. 'a' (applies to all links or <a> tags), '.my-class' (applies to elements with the class "my-class")

Troubleshooting

  • Cursor not changing on hover: Make sure the hoverSelector is correctly targeting the desired elements. Double-check your CSS selectors.
  • Cursor stacking issues: Adjust the zIndex property to ensure the cursor is on top of other elements.
  • Transitions not smooth: Check the transitionDuration and transitionTimingFunction properties.

Note: If some properties are not valid, the custom cursor might face issues such as incorrect styling, unexpected behavior, or not appearing at all. Ensure all values are properly set.





Athentri

Athentri

The Athentri cursor consists of a single "outer" circle that changes size on hover and uses a blending mode to invert the colors underneath it.


Customizing the Normal Cursor State (cursor)

The cursor object controls the appearance and behavior of the cursor when it's not hovering over any specified elements.

Outer Circle (outer) Properties

The outer object contains CSS properties to style the outer circle of the cursor.

Property Description Example
width Width of the outer circle. '20px'
height Height of the outer circle. '20px'
backgroundColor Background color of the outer circle. '#ffffff' (white)
blendingMode Specifies the blending mode. difference inverts the colors underneath the cursor. 'difference'
opacity Transparency of the outer circle. 1 (fully opaque), 0.5 (50% transparent)
borderRadius Rounded corners of the outer circle. Use '50%' for a perfect circle. '50%'
transitionDuration Duration of the transition effect. Affects how smoothly the cursor changes its appearance or movement. '0.2s'
transitionTimingFunction The easing function to use for the transition (e.g., 'ease-out', 'linear'). 'ease-out'
zIndex The stacking order of the element. Ensure it's high enough to be visible above other elements. '99'

Options (options)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it. This cursor *shows* the default cursor. true (shows the default cursor)


Customizing the Hover State (hover)

The hover object controls the appearance and behavior of the cursor when it's hovering over specific elements.

Outer Circle (outer) Properties (Hover)

These properties are the same as the normal state outer properties, but they apply only when the cursor is hovering over the specified element.

See the "Outer Circle (outer) Properties" section above for details on the properties.

Options (options) (Hover)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it on hover. true (shows the default cursor)
hoverSelector A CSS selector that specifies which elements should trigger the hover effect. 'a' (applies to all <a> elements), '.my-class' (applies to elements with the class "my-class")

Troubleshooting

  • Cursor not changing on hover: Make sure the hoverSelector is correctly targeting the desired elements. Double-check your CSS selectors.
  • Cursor stacking issues: Adjust the zIndex property to ensure the cursor is on top of other elements.
  • Transitions not smooth: Check the transitionDuration and transitionTimingFunction properties.
  • Blending mode not working as expected: The difference blending mode can produce unexpected results depending on the colors underneath. Experiment with different blending modes to achieve the desired effect.

Note: If some properties are not valid, the custom cursor might face issues such as incorrect styling, unexpected behavior, or not appearing at all. Ensure all values are properly set.





Posquareon

Posquareon

The Posquareon cursor consists of an outer circle and an inner circle, with the outer circle expanding on hover.


Customizing the Normal Cursor State (cursor)

The cursor object controls the appearance and behavior of the cursor when it's not hovering over any specified elements. The Posquareon cursor consists of an outer circle and an inner circle.

Outer Circle (outer) Properties

The outer object contains CSS properties to style the outer circle of the cursor.

Property Description Example
width Width of the outer circle. '30px'
height Height of the outer circle. '30px'
opacity Transparency of the outer circle. A value of 0.2 makes it quite faint. 0.2
borderRadius Rounded corners of the outer circle. Use '50%' for a perfect circle. '50%'
backgroundColor Background color of the outer circle. '#000000' (black)
blendingMode Specifies the blending mode. 'normal'
transitionDuration Duration of the transition effect. Affects how smoothly the cursor changes its appearance and movement. '0.2s'
transitionTimingFunction The easing function to use for the transition (e.g., 'ease-out', 'linear'). 'ease-out'
zIndex The stacking order of the element. Ensure it's high enough to be visible above other elements. '99'

Inner Circle (inner) Properties

The inner object contains CSS properties to style the inner circle of the cursor.

Property Description Example
width Width of the inner circle. '4px'
height Height of the inner circle. '4px'
backgroundColor Background color of the inner circle. '#000000' (black)
opacity Transparency of the inner circle. 1 (fully opaque)
borderRadius Rounded corners of the inner circle. Use '50%' for a perfect circle. '50%'
blendingMode Specifies the blending mode. 'normal'
zIndex The stacking order of the element. Ensure it's high enough to be visible above other elements. '99'

Options (options)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it. This cursor hides the default cursor. false (hides the default cursor)

Customizing the Hover State (hover)

The hover object controls the appearance and behavior of the cursor when it's hovering over specific elements.

Outer Circle (outer) Properties (Hover)

These properties are the same as the normal state outer properties, but they apply only when the cursor is hovering over the specified element.

See the "Outer Circle (outer) Properties" section above for details on the properties.

Inner Circle (inner) Properties (Hover)

These properties are the same as the normal state inner properties, but they apply only when the cursor is hovering over the specified element.

See the "Inner Circle (inner) Properties" section above for details on the properties.

Options (options) (Hover)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it on hover. false (hides the default cursor)
hoverSelector A CSS selector that specifies which elements should trigger the hover effect. 'a' (applies to all <a> elements), '.my-class' (applies to elements with the class "my-class")

Troubleshooting

  • Cursor not changing on hover: Make sure the hoverSelector is correctly targeting the desired elements. Double-check your CSS selectors.
  • Cursor stacking issues: Adjust the zIndex property to ensure the cursor is on top of other elements.
  • Transitions not smooth: Check the transitionDuration and transitionTimingFunction properties.

Note: If some properties are not valid, the custom cursor might face issues such as incorrect styling, unexpected behavior, or not appearing at all. Ensure all values are properly set.





Apollonix

Apollonix

The Apollonix cursor features both an inner and outer circle. On hover, the inner circle shrinks.


Customizing the Normal Cursor State (cursor)

The cursor object controls the appearance and behavior of the cursor when it's not hovering over any specified elements. The Apollonix cursor consists of an outer circle and an inner circle.

Inner Circle (inner) Properties

The inner object contains CSS properties to style the inner circle of the cursor.

Property Description Example
width Width of the inner circle. '20px'
height Height of the inner circle. '20px'
backgroundColor Background color of the inner circle. '#000000' (black)
blendingMode Specifies the blending mode. 'normal'
opacity Transparency of the inner circle. 1 (fully opaque)
borderRadius Rounded corners of the inner circle. Use '50%' for a perfect circle. '50%'
zIndex The stacking order of the element. Ensure it's high enough to be visible above other elements. '99'

Outer Circle (outer) Properties

The outer object contains CSS properties to style the outer circle of the cursor.

Property Description Example
width Width of the outer circle. '20px'
height Height of the outer circle. '20px'
backgroundColor Background color of the outer circle. '#000000' (black)
blendingMode Specifies the blending mode. 'normal'
opacity Transparency of the outer circle. 0.2
borderRadius Rounded corners of the outer circle. Use '50%' for a perfect circle. '50%'
transitionDuration Duration of the transition effect. Affects how smoothly the cursor changes its appearance and movement. '0.2s'
transitionTimingFunction The easing function to use for the transition (e.g., 'ease-out', 'linear'). 'ease-out'
zIndex The stacking order of the element. Ensure it's high enough to be visible above other elements. '99'

Options (options)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it. true (shows the default cursor)


Customizing the Hover State (hover)

The hover object controls the appearance and behavior of the cursor when it's hovering over specific elements.

Inner Circle (inner) Properties (Hover)

These properties are the same as the normal state inner properties, but they apply only when the cursor is hovering over the specified element.

See the "Inner Circle (inner) Properties" section above for details on the properties.

Outer Circle (outer) Properties (Hover)

These properties are the same as the normal state outer properties, but they apply only when the cursor is hovering over the specified element.

See the "Outer Circle (outer) Properties" section above for details on the properties.

Options (options) (Hover)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it on hover. true (shows the default cursor)
hoverSelector A CSS selector that specifies which elements should trigger the hover effect. 'a' (applies to all <a> elements), '.my-class' (applies to elements with the class "my-class")

Troubleshooting

  • Cursor not changing on hover: Make sure the hoverSelector is correctly targeting the desired elements. Double-check your CSS selectors.
  • Cursor stacking issues: Adjust the zIndex property to ensure the cursor is on top of other elements.
  • Transitions not smooth: Check the transitionDuration and transitionTimingFunction properties.
  • Inner circle not shrinking on hover: Ensure the transitionDuration property in the hover.inner object is set to a reasonable value (e.g., '0.1s') to allow the shrinking effect to be visible. A value of '0s' will make the change instantaneous.

Note: If some properties are not valid, the custom cursor might face issues such as incorrect styling, unexpected behavior, or not appearing at all. Ensure all values are properly set.





Hadexagon

Hadexagon

The Hadexagon cursor is characterized by a simple bordered circle that expands upon hovering.


Customizing the Normal Cursor State (cursor)

The cursor object controls the appearance and behavior of the cursor when it's not hovering over any specified elements. The Hadexagon cursor consists of a single outer circle.

Outer Circle (outer) Properties

The outer object contains CSS properties to style the outer circle of the cursor.

Property Description Example
width Width of the outer circle. '30px'
height Height of the outer circle. '30px'
borderColor Color of the border. '#000000' (black)
borderWidth Width of the border. 1 (pixel value)
borderStyle Style of the border (e.g., solid, dashed, dotted). 'solid'
blendingMode Specifies the blending mode. 'normal'
opacity Transparency of the outer circle. 1 (fully opaque)
borderRadius Rounded corners of the outer circle. Use '50%' for a perfect circle. '50%'
transitionDuration Duration of the transition effect. Affects how smoothly the cursor changes its appearance or movement. '0.2s'
transitionTimingFunction The easing function to use for the transition (e.g., 'ease-out', 'linear'). 'ease-out'
zIndex The stacking order of the element. Ensure it's high enough to be visible above other elements. '99'

Options (options)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it. true (shows the default cursor)


Customizing the Hover State (hover)

The hover object controls the appearance and behavior of the cursor when it's hovering over specific elements.

Outer Circle (outer) Properties (Hover)

These properties are the same as the normal state outer properties, but they apply only when the cursor is hovering over the specified element. In this case, the outer circle *expands*.

See the "Outer Circle (outer) Properties" section above for details on the properties.

Options (options) (Hover)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it on hover. true (shows the default cursor)
hoverSelector A CSS selector that specifies which elements should trigger the hover effect. 'a' (applies to all <a> elements), '.my-class' (applies to elements with the class "my-class")

Troubleshooting

  • Cursor not changing on hover: Make sure the hoverSelector is correctly targeting the desired elements. Double-check your CSS selectors.
  • Cursor stacking issues: Adjust the zIndex property to ensure the cursor is on top of other elements.
  • Transitions not smooth: Check the transitionDuration and transitionTimingFunction properties.
  • Border not visible: Ensure that both borderColor, borderWidth, and borderStyle are set correctly. If borderWidth is 0, or borderStyle is set to none, the border will not be visible.

Note: If some properties are not valid, the custom cursor might face issues such as incorrect styling, unexpected behavior, or not appearing at all. Ensure all values are properly set.





Hermorbis

Hermorbis

The Hermorbis cursor is defined by an inner, translucent circle and a bordered outer circle. On hover, the inner circle expands, while the outer circle shrinks.


Customizing the Normal Cursor State (cursor)

The cursor object controls the appearance and behavior of the cursor when it's not hovering over any specified elements. The Hermorbis cursor is made up of an inner and an outer circle.

Inner Circle (inner) Properties

The inner object contains CSS properties to style the inner circle of the cursor.

Property Description Example
width Width of the inner circle. '30px'
height Height of the inner circle. '30px'
backgroundColor Background color of the inner circle. '#000000' (black)
blendingMode Specifies the blending mode. 'normal'
opacity Transparency of the inner circle. A value of 0.2 makes it translucent. 0.2
borderRadius Rounded corners of the inner circle. Use '50%' for a perfect circle. '50%'
transitionDuration Duration of the transition effect when the inner circle changes size or movement. '0.2s'
transitionTimingFunction The easing function to use for the transition of the inner circle. 'ease-out'
zIndex The stacking order of the element. Ensure it's high enough to be visible above other elements. '99'

Outer Circle (outer) Properties

The outer object contains CSS properties to style the outer circle of the cursor.

Property Description Example
width Width of the outer circle. '30px'
height Height of the outer circle. '30px'
borderColor Color of the border. '#000000' (black)
borderWidth Width of the border. 1 (pixel value)
borderStyle Style of the border (e.g., solid, dashed, dotted). 'solid'
blendingMode Specifies the blending mode. 'normal'
borderRadius Rounded corners of the outer circle. Use '50%' for a perfect circle. '50%'
transitionDuration Duration of the transition effect when the outer circle changes size or movement. '0.1s'
transitionTimingFunction The easing function to use for the transition of the outer circle. 'ease-out'
zIndex The stacking order of the element. Ensure it's high enough to be visible above other elements. '99'

Options (options)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it. true (shows the default cursor)


Customizing the Hover State (hover)

The hover object controls the appearance and behavior of the cursor when it's hovering over specific elements.

Inner Circle (inner) Properties (Hover)

These properties are the same as the normal state inner properties, but they apply only when the cursor is hovering over the specified element. On hover, the inner circle *expands* in this case.

See the "Inner Circle (inner) Properties" section above for details on the properties.

Outer Circle (outer) Properties (Hover)

These properties are the same as the normal state outer properties, but they apply only when the cursor is hovering over the specified element. On hover, the outer circle *shrinks* in this case.

See the "Outer Circle (outer) Properties" section above for details on the properties.

Options (options) (Hover)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it on hover. true (shows the default cursor)
hoverSelector A CSS selector that specifies which elements should trigger the hover effect. 'a' (applies to all <a> elements), '.my-class' (applies to elements with the class "my-class")

Troubleshooting

  • Cursor not changing on hover: Make sure the hoverSelector is correctly targeting the desired elements. Double-check your CSS selectors.
  • Cursor stacking issues: Adjust the zIndex property to ensure the cursor is on top of other elements.
  • Transitions not smooth: Check the transitionDuration and transitionTimingFunction properties. Specifically, the transitionDuration in both cursor.inner and hover.inner, as well as cursor.outer and hover.outer, affect the smoothness of the size changes.
  • Outer border not visible: Ensure that borderColor, borderWidth, and borderStyle are all set correctly for the outer circle.
  • Size change on hover not noticeable: The final size of the outer circle on hover is quite small (10px). Consider using larger values for a more pronounced effect.

Note: If some properties are not valid, the custom cursor might face issues such as incorrect styling, unexpected behavior, or not appearing at all. Ensure all values are properly set.





Dionytris

Dionytris

The Dionytris cursor is a complex SVG-based cursor comprised of a center shape, a middle shape, an outer shape, and circular text. This cursor allows for extensive visual customization, including spinning elements and blending modes.


Customizing the Normal Cursor State (cursor)

The cursor object controls the appearance and behavior of the cursor when it's not hovering over any specified elements. The Dionytris cursor is structured with distinct shapes and text elements, each configurable.

Center Shape (centerShape) Properties

The centerShape object defines the properties of the shape at the very center of the cursor.

Property Description Example
visible Determines whether the center shape is visible. true, false
fill The fill color of the center shape. '#ffffff' (white), 'red'
opacity Transparency of the center shape. 1 (fully opaque), 0.5 (50% transparent)
radius The radius of the center shape (only works for type 1). 5 (numeric value)
type Center Shape Type. There are 10 different shapes available. 1 - 10

Middle Shape (middleShape) Properties

The middleShape object defines the properties of the shape between the center and outer shapes.

Property Description Example
visible Determines whether the middle shape is visible. true, false
scale Scales the size of the middle shape. A value of 1 represents the original size. 0.5 (50% of original size), 1 (original size)
fill The fill color of the middle shape. 'red', '#0000ff' (blue)
opacity Transparency of the middle shape. 1 (fully opaque), 0.5 (50% transparent)
blendingMode The blending mode to apply to the middle shape. 'normal', 'multiply', etc. (See CSS blending modes)
type Middle Shape Type. 55 different shapes are available. 1 - 55
spin Determines whether the middle shape spins. true, false
spinDirection The direction of the spin. 'right', 'left'
spinDuration The duration of one full spin cycle (e.g., '12s' for 12 seconds). '12s'

Outer Shape (outerShape) Properties

The outerShape object defines the properties of the outermost shape of the cursor.

Property Description Example
visible Determines whether the outer shape is visible. true, false
radius The radius of the outer shape (assumes it is circular). 100 (numeric value)
fill The fill color of the outer shape. '#000000' (black)
opacity Transparency of the outer shape. 1 (fully opaque), 0.5 (50% transparent)
blendingMode The blending mode to apply to the outer shape. 'normal', 'multiply', etc. (See CSS blending modes)

Text (text) Properties

The text object defines the properties of the circular text around the cursor.

Property Description Example
visible Determines whether the text is visible. true, false
content The text content to display. "Circular Text Example . Circular Text Example ."
fontSize The font size of the text. 20 (numeric value in pixels)
fontWeight The font weight of the text. 900 (boldest), 400 (normal)
fill The fill color of the text. '#ffffff' (white)
opacity Transparency of the text. 1 (fully opaque), 0.5 (50% transparent)
spin Determines whether the text spins. true, false
spinDirection The direction of the spin. 'left', 'right'
spinDuration The duration of one full spin cycle (e.g., '12s' for 12 seconds). '12s'

SVG Shape (svgShape) Properties

The svgShape object contains properties that apply to the overall SVG element.

Property Description Example
width The width of the SVG element. 100 (numeric value in pixels)
zIndex The stacking order of the SVG element. '99'
transition CSS transition for the entire SVG. "all 50ms ease-out"

Options (options)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it. This cursor *shows* the default cursor. true (shows the default cursor)


Customizing the Hover State (hover)

The hover object controls the appearance and behavior of the cursor when it's hovering over specific elements.

The properties for the centerShape, middleShape, outerShape, text, and svgShape objects in the hover state are the same as in the normal cursor state. See the descriptions above for each property.

Options (options) (Hover)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it on hover. false (hides the default cursor)
hoverSelector A CSS selector that specifies which elements should trigger the hover effect. 'a' (applies to all <a> elements), '.my-class' (applies to elements with the class "my-class")

Troubleshooting

  • Cursor not changing on hover: Make sure the hoverSelector is correctly targeting the desired elements. Double-check your CSS selectors.
  • Cursor stacking issues: Adjust the zIndex property in the svgShape object to ensure the cursor is on top of other elements.
  • Spinning elements not working: Ensure that spin is set to true and that spinDuration is a valid CSS time value (e.g., '12s'). Also, ensure the spin isn't being overridden by other CSS.
  • Text not displaying correctly: Check the fontSize, fontWeight, and fill properties in the text object. Also, verify that the content property contains valid text. The container needs to be large enough to display the text with the specified font size.
  • Transitions not smooth: Check the transition property in the svgShape object, as well as the transitionDuration in inner and middle shapes if their properties are animated.

Note: Due to the complexity of this cursor, invalid or conflicting property values can lead to unexpected behavior. Validate all values carefully. Because this is an SVG, certain CSS properties might not behave exactly as expected. Test thoroughly.





Aroneko

Aroneko

The Aroneko cursor doesn't have configurable properties within the customization modal. It displays a cat animation that follows the mouse cursor around the page. The appearance and behavior of the cat are determined by the script itself and are not directly controlled through configuration settings in the customization modal.





Cronovoid

Cronovoid

The Cronovoid cursor is a unique HTML-based cursor consisting of an inner circle and an outer text label. The outer text label changes from "Cursor" to "View" on hover, and the inner circle expands.


Customizing the Normal Cursor State (cursor)

The cursor object controls the appearance and behavior of the cursor when it's not hovering over any specified elements. The Cronovoid cursor is composed of an inner circle and an outer text label.

Inner Circle (inner) Properties

The inner object contains CSS properties to style the inner circle of the cursor.

Property Description Example
width Width of the inner circle. '5px'
height Height of the inner circle. '5px'
backgroundColor Background color of the inner circle. '#ffb703' (amber)
opacity Transparency of the inner circle. 1 (fully opaque)
borderRadius Rounded corners of the inner circle. Use '50%' for a perfect circle. '50%'
transitionDuration Duration of the transition effect when the inner circle changes size or position. '0s'
transitionTimingFunction The easing function to use for the transition of the inner circle. 'ease-out'

Outer Text Label (outer) Properties

The outer object contains CSS properties to style the outer text label of the cursor.

Property Description Example
width Width of the outer text label. Set to 'auto' to fit content. 'auto'
height Height of the outer text label. Set to 'auto' to fit content. 'auto'
top Vertical offset of the label. '5px'
left Horizontal offset of the label. '5px'
padding Padding around the text within the label. '3px 5px'
backgroundColor Background color of the text label. '#222222' (dark gray)
text The text to display in the label. 'Cursor'
textSize The font size of the text. '14px'
textWeight The font weight of the text. 400 (normal)
textColor The color of the text. '#ffffff' (white)
borderColor Color of the border around the text label. '#222222' (dark gray)
borderWidth Width of the border around the text label. 1 (pixel value)
borderStyle Style of the border (e.g., solid, dashed, dotted). 'solid'
borderRadius Rounded corners of the text label. '5px'
transitionDuration Duration of the transition effect when the text label changes appearance or position. '0.1s'
transitionTimingFunction The easing function to use for the transition of the text label. 'ease-out'
zIndex The stacking order of the element. Ensure it's high enough to be visible above other elements. '99'
opacity Transparency of the text label. 1 (fully opaque)

Options (options)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it. false (hides the default cursor)


Customizing the Hover State (hover)

The hover object controls the appearance and behavior of the cursor when it's hovering over specific elements.

Inner Circle (inner) Properties (Hover)

These properties are the same as the normal state inner properties, but they apply only when the cursor is hovering over the specified element. In this case, the inner circle *expands*.

See the "Inner Circle (inner) Properties" section above for details on the properties.

Outer Text Label (outer) Properties (Hover)

These properties are the same as the normal state outer properties, but they apply only when the cursor is hovering over the specified element. Notably, the text property changes to "View".

See the "Outer Text Label (outer) Properties" section above for details on the properties.

Options (options) (Hover)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it on hover. false (hides the default cursor)
hoverSelector A CSS selector that specifies which elements should trigger the hover effect. 'a' (applies to all <a> elements), '.my-class' (applies to elements with the class "my-class")

Troubleshooting

  • Cursor not changing on hover: Make sure the hoverSelector is correctly targeting the desired elements. Double-check your CSS selectors.
  • Cursor stacking issues: Adjust the zIndex property in the outer object to ensure the cursor is on top of other elements.
  • Text label not displaying correctly: Check the text, textSize, textWeight, and textColor properties in the outer object. Also, ensure the width and height are set to 'auto' to allow the label to fit the content.
  • Inner circle not transitioning smoothly: Ensure the transitionDuration property in the hover.inner object is set to a reasonable value (e.g., '0.2s') to allow the expansion effect to be visible.
  • Text label isn't positioned correctly: Check the top and left properties to adjust the text offset.

Note: The width and height properties being set to `'auto'` is crucial for the text to display correctly within the label, as it allows the container to adjust to the text's size. Additionally, the inner circle’s transition duration needs to be set to a reasonable time.





Hephamage

Hephamage

The Hephamage cursor implements an image trail effect, displaying a series of images that follow the mouse cursor, creating a trail. This cursor uses a sequence of images loaded from specified URLs.


Understanding the Hephamage Image Trail Cursor

The Hephamage cursor relies on a configuration object to define its appearance and behavior. Since it's an image-based cursor trail, the configuration mainly involves specifying the images to use, how quickly they appear, and basic styling.

Configuration (config) Properties

The config object contains properties that control the image trail effect.

Property Description Example
imageUrls A comma-separated list of URLs pointing to the images used in the trail. `/public/img/1.png, /public/img/2.png, ...`
Important: Ensure that the images are accessible and that the URLs are correct. You can get the image URL from the media library on your WordPress dashboard.
threshold Determines how frequently a new image appears in the trail. Lower values create a more dense, frequent trail. 80 (higher values mean fewer images in the trail)
width The width of each image in the trail. The height will generally scale proportionally. '100px'
filter CSS filter to apply to the images (e.g., blur, grayscale). 'none', 'blur(5px)', 'grayscale(100%)'
See MDN for available CSS filters.
blendingMode The blending mode to apply to the images as they overlap. 'normal', 'multiply', 'screen'
See MDN for available CSS blending modes.
zIndex The stacking order of the image trail elements. Ensure it's high enough to be visible above other elements. '99'
style Defines the trail type. There are 6 types available 1 - 6

Troubleshooting

  • Images not appearing: Double-check that the imageUrls are correct and that the images are accessible at those URLs. Inspect the network requests in your browser's developer tools to confirm that the images are being loaded successfully.
  • Trail too short or too long: Adjust the threshold property. Lower values create a denser, longer trail, while higher values create a shorter, sparser trail.
  • Images are overlapping strangely: Experiment with different blendingMode values to achieve the desired visual effect.
  • Images are not styled correctly: Use the filter property to adjust the image appearance (e.g., add blur, change the color).
  • Image trail appears *behind* other elements: Adjust the zIndex property to ensure the trail is stacked above other content.

Note: The performance of the image trail effect can be affected by the number of images in the trail and the size of the images. Optimize images for web use to improve performance. Also, because this cursor creates many elements, it can be more resource-intensive than simpler cursors.





Artemiscle

Artemiscle

The Artemiscle cursor is an HTML-based cursor that creates a glowing effect by using `box-shadow` extensively. The cursor has an inner and outer circle, with the outer circle becoming visible and the inner circle disappearing on hover.


Customizing the Normal Cursor State (cursor)

The cursor object controls the appearance and behavior of the cursor when it's not hovering over any specified elements. The Artemiscle cursor is comprised of an inner and outer circle, both leveraging the box-shadow property to create a glow.

Inner Circle (inner) Properties

The inner object contains CSS properties to style the inner circle of the cursor.

Property Description Example
width Width of the inner circle. '20px'
height Height of the inner circle. '20px'
backgroundColor Background color of the inner circle (though it's mostly covered by the shadow). 'blue'
opacity Transparency of the inner circle. 1 (fully opaque)
borderRadius Rounded corners of the inner circle. Use '50%' for a perfect circle. '50%'
boxShadow The box shadow creates the glowing effect. The larger the blur and spread values, the bigger the glow. '0 0 120px 30px'
color This property is not used. 'blue'
blendingMode The blending mode applied to the inner circle. 'normal'
transitionDuration Duration of the transition effect. '0s'
transitionTimingFunction The easing function to use for the transition. 'ease-out'

Outer Circle (outer) Properties

The outer object contains CSS properties to style the outer circle of the cursor. This object is largely responsible for the text label and becomes visible on hover.

Property Description Example
width Width of the outer circle. '100px'
height Height of the outer circle. '100px'
backgroundColor Background color of the outer circle (though it's mostly covered by the shadow). 'blue'
boxShadow The box shadow creates the glowing effect for the outer circle. '0 0 170px 100px'
text The text to display in the outer circle. 'View'
textSize The font size of the text. '14px'
textWeight The font weight of the text. 500
textColor The color of the text. 'white'
color This property is not used. 'blue'
blendingMode The blending mode applied to the outer circle. 'normal'
borderColor Color of the border (set to transparent). 'transparent'
borderWidth Width of the border (set to 0). 0
borderStyle Style of the border. 'solid'
borderRadius Rounded corners of the outer circle. Use '50%' for a perfect circle. '50%'
transitionDuration Duration of the transition effect. '0.1s'
transitionTimingFunction The easing function to use for the transition. 'ease-out'
zIndex The stacking order of the element. Ensure it's high enough to be visible above other elements. '99'
opacity Transparency of the outer circle. Set to 0 initially, so it's invisible until hover. 0

Options (options)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it. false (hides the default cursor)


Customizing the Hover State (hover)

The hover object controls the appearance and behavior of the cursor when it's hovering over specific elements.

Inner Circle (inner) Properties (Hover)

These properties define the inner circle's state on hover. Notably, the inner circle fades away by setting opacity: 0.

See the "Inner Circle (inner) Properties" section above for details on most of the properties.

Outer Circle (outer) Properties (Hover)

The key change on hover is setting opacity: 1 on the outer circle, making it visible.

See the "Outer Circle (outer) Properties" section above for details on the properties.

Options (options) (Hover)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it on hover. false (hides the default cursor)
hoverSelector A CSS selector that specifies which elements should trigger the hover effect. 'a' (applies to all <a> elements), '.my-class' (applies to elements with the class "my-class")

Troubleshooting

  • Cursor not changing on hover: Make sure the hoverSelector is correctly targeting the desired elements. Double-check your CSS selectors.
  • Cursor stacking issues: Adjust the zIndex property in the outer object to ensure the cursor is on top of other elements.
  • Outer circle not appearing on hover: Ensure that the opacity property in the cursor.outer object is set to 0 and that the opacity property in the hover.outer object is set to 1. Also, verify that the transitionDuration is set to a value greater than 0 to see the transition happen.
  • Inner circle doesn't disappear smoothly: Ensure that transitionDuration is set to a reasonable time.
  • Glowing effect not visible: Make sure the boxShadow property is set correctly in both the inner and outer objects. Experiment with different blur and spread values for the shadow.

Note: This cursor relies heavily on the box-shadow property to create the glowing effect. Experiment with different values to achieve the desired look. Setting a `transitionDuration` of 0s can prevent properties from updating correctly.





Hestellipse

Hestellipse

The Hestellipse cursor uses an SVG path to define its shape. The cursor's appearance is controlled by the SVG's path properties, such as stroke, stroke width, and stroke line cap.


Understanding the Hestellipse SVG Cursor

The Hestellipse cursor's shape is determined by an SVG path. Customization mainly involves modifying the path's visual attributes.

SVG (svg) Properties

The svg object contains properties related to the overall SVG container.

Property Description Example
viewBox Defines the coordinate system of the SVG. This is essential for scaling the SVG correctly. '0 0 1 1' (typically, setting up a 1x1 coordinate system for relative scaling)

Path (path) Properties

The path object contains properties that style the SVG path that forms the cursor's shape. Important: This configuration only changes the *style* of the path, not the path *data* (the "d" attribute which defines the actual shape).

Property Description Example
fill The fill color of the path. Since this cursor uses a stroke, setting the fill to 'none' is common. 'none'
stroke The color of the path's outline. '#ff0000' (red)
strokeWidth The width of the path's outline. '4px'
strokeLinecap Defines the shape of the ends of open subpaths (lines). 'round', 'butt', 'square'
strokeLinejoin Defines the shape to be used at the corners of paths or basic shapes. 'round', 'bevel', 'miter'

Troubleshooting

  • Cursor not visible: Ensure that the stroke property is set to a color and that strokeWidth is greater than zero. Also ensure that your path is properly visible and formed.
  • Cursor shape incorrect: You cannot change the cursor shape through these settings. Modify the SVG's "d" attribute (the path data) directly.
  • Cursor scaling incorrectly: Verify that the viewBox attribute is set correctly. A common setting is '0 0 1 1'.

Note: This cursor provides limited styling options, and modification to the SVG itself is outside the scope of these settings. Also, you'll want to familiarize yourself with SVG path syntax if you want to create your own SVG cursors.





Demetrobyte

Demetrobyte

The Demetrobyte cursor uses an SVG with a "gooey" or liquid-like effect. The visual appearance is generated by manipulating a grid-like structure within the SVG.


Understanding the Demetrobyte Gooey SVG Cursor

The Demetrobyte cursor uses configuration parameters to generate a liquid/gooey effect via an SVG grid. Customization mainly involves tweaking the parameters that define this grid and its appearance.

Configuration (config) Properties

The config object contains the properties that control the gooey SVG cursor effect.

Property Description Example
columns The number of columns in the grid that creates the gooey effect. More columns typically result in a more detailed or complex appearance. 30
borderRadius The border radius applied to the grid elements. A small border radius can create smoother, more rounded shapes for the gooey effect. '0px'
backgroundColor The background color of the grid elements. 'red'
blendingMode The blending mode to apply to the grid elements, which can affect how they interact with content behind the cursor. 'normal', 'multiply', 'screen' (See MDN for available CSS blending modes)
style Defines the interaction style, 8 different styles are available. 1-8

Important Considerations

  • Performance Impact: Gooey effects, especially with a high number of columns, can be computationally expensive. Be mindful of performance, especially on lower-powered devices.
  • Limited Shape Customization: While you can control the grid's appearance, the overall shape of the cursor is determined by the underlying code that generates the effect. You cannot directly define the cursor's shape through these settings.
  • Complexity: The actual "gooey" effect is likely achieved with JavaScript and SVG filters that are not directly configurable through this configuration object.

Troubleshooting

  • Cursor not visible or not showing the effect: Ensure that backgroundColor is set to a visible color and that the columns value is not set to 0 or an extremely high value.
  • Performance issues: Reduce the number of columns to improve performance. Also, consider simplifying the page content behind the cursor, as blending modes can be resource-intensive.
  • Blending mode not working as expected: Experiment with different blendingMode values to see which one produces the desired effect with your page content.

Note: This cursor relies on dynamic SVG generation and potentially complex JavaScript. Modifications beyond these configuration settings might require advanced knowledge of SVG, JavaScript, and web performance optimization. The appearance of the "gooey" effect can depend heavily on the content behind the cursor and the chosen blending mode.





Nyxamoke

Nyxamoke

The Nyxamoke cursor generates a dynamic fluid simulation effect (akin to smoke or water color) using a Canvas element. This cursor offers a highly interactive and visually striking effect with a wide range of configuration options.


Understanding the Nyxamoke Fluid Simulation Cursor

The Nyxamoke cursor's fluid simulation is driven by various parameters that control the simulation's resolution, behavior, and visual styling. These parameters define the appearance and interaction of the "fluid".

Configuration (config) Properties

The config object contains the properties that govern the fluid simulation.

Property Description Example
simResolution Resolution of the simulation grid. Lower values improve performance but reduce detail. Higher values increase detail but decrease performance. 128
dyeResolution Resolution of the dye texture, which determines the level of detail in the color gradients and patterns. 1024
captureResolution Resolution at which the canvas is captured for post-processing effects. 512
densityDissipation Rate at which the density (or "smoke") dissipates over time. Higher values make the effect fade faster. 3.5
velocityDissipation Rate at which the fluid's velocity decreases over time, affecting how long the fluid keeps moving after an interaction. 1.5
pressure Force applied to the fluid when interacting with it. 0.4
pressureIterations Number of iterations used to calculate pressure, affecting the accuracy of the simulation. 20
curl Amount of curl or swirl added to the fluid. Higher values create more complex patterns. 15
splatRadius Radius of the "splat" (the area of effect) when interacting with the fluid. 0.25
splatForce Force applied to the fluid when creating a "splat". 6000
shading Enables or disables shading, which adds depth and dimension to the fluid. true, false
colorful Determines whether the fluid simulation has multiple colors or is grayscale. true, false
colorUpdateSpeed Rate at which the colors change (if colorful is true). 10
paused Pauses the simulation. true, false
backColor Background color of the canvas. { r: 0, g: 0, b: 0 } (black)
transparent Makes the background transparent. Note that this can significantly affect performance. true, false
blendingMode The blending mode applied to the canvas element. 'difference', 'normal', 'multiply' (See MDN for available CSS blending modes)
bloom Enables or disables a bloom effect, which adds a soft glow around bright areas. true, false
bloomIterations Number of iterations used for the bloom effect. 8
bloomResolution Resolution of the bloom effect. 256
bloomIntensity Intensity of the bloom effect. 0.8
bloomThreshold Threshold above which the bloom effect is applied. 0.6
bloomSoftKnee A soft knee parameter for the bloom effect. 0.7
sunrays Enables or disables sunrays effect. true, false
sunraysResolution The amount of sampling when applying the sunrays effect 196
sunraysWeight Intensity of the sunrays 1.0

Important Considerations

  • Performance: Fluid simulations are computationally expensive. Lower simResolution, dyeResolution, and disabling shading, bloom, and sunrays will significantly improve performance.
  • Transparency: Setting transparent to true can be particularly demanding on performance.
  • Complex Interactions: The fluid simulation's behavior is governed by numerous interconnected parameters. Experimentation is key to achieving the desired effect.

Troubleshooting

  • Simulation not visible: Ensure that paused is set to false, transparent is set to false and backColor property is set to a color value with non-zero r,g, and b value.
  • Poor performance: Reduce the simResolution and dyeResolution, and disable shading, bloom, and sunrays.
  • Unpredictable behavior: Experiment with different values for densityDissipation, velocityDissipation, pressure, and curl to fine-tune the simulation's behavior.

Note: This cursor relies on complex canvas-based fluid simulation techniques. Modifying parameters beyond these settings may require advanced knowledge of fluid dynamics, shader programming, and canvas APIs. The behavior can also be significantly influenced by the underlying hardware. Test on various devices.





Gaialoop

Gaialoop

The Gaialoop cursor is characterized by three distinct shapes that create a dynamic, looping effect. The size and appearance of these shapes can be customized, as well as the overall behavior of the cursor.


Customizing the Normal Cursor State (cursor)

The cursor object controls the appearance and behavior of the cursor when it's not hovering over any specified elements. The Gaialoop cursor consists of three shapes, each customizable with different colors and lengths.

Shape 1 (shape1) Properties

The shape1 object contains properties that style the first shape of the cursor.

Property Description Example
color The color of the first shape. 'blue'
length The length of the first shape. This value influences the shape's size and contribution to the overall cursor effect. 30 (numeric value)

Shape 2 (shape2) Properties

The shape2 object contains CSS properties to style the second shape of the cursor.

Property Description Example
color The color of the second shape. 'yellow'
length The length of the second shape. This value influences the shape's size and contribution to the overall cursor effect. 20 (numeric value)

Shape 3 (shape3) Properties

The shape3 object contains CSS properties to style the third shape of the cursor.

Property Description Example
color The color of the third shape. 'red'
length The length of the third shape. This value influences the shape's size and contribution to the overall cursor effect. 10 (numeric value)

Configuration (config) Properties

The config object contains properties that influence how the cursor functions.

Property Description Example
ease The easing value affects the smoothness of the cursor's movement. A higher value results in a smoother, more delayed movement, while a lower value results in a more direct movement. 0.7 (numeric value between 0 and 1, typically)
width The overall width of the cursor effect. This influences the size of the entire cursor. 40 (numeric value, likely in pixels)

Options (options)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it. This cursor *hides* the default cursor. false (hides the default cursor)


Customizing the Hover State (hover)

The hover object controls the appearance and behavior of the cursor when it's hovering over specific elements.

Configuration (config) Properties (Hover)

The config object under hover allows customizing the cursor's appearance when hovering over specific elements.

Property Description Example
width Width of the cursor on hover. 10 (numeric value)
strokeWidth Width of the cursor stroke. 2 (numeric value)
strokeColor Color of the cursor stroke. 'red'
strokeRadius Radius of the stroke. 30 (numeric value)

Options (options) (Hover)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it on hover. false (hides the default cursor)
hoverSelector A CSS selector that specifies which elements should trigger the hover effect. 'a' (applies to all <a> elements), '.my-class' (applies to elements with the class "my-class")

Troubleshooting

  • Cursor not changing on hover: Make sure the hoverSelector is correctly targeting the desired elements. Double-check your CSS selectors.
  • Cursor movement jerky or unresponsive: Adjust the ease property. A lower value makes the cursor more responsive.
  • Shapes not visible: Ensure that the color properties for shape1, shape2, and shape3 are set to valid color values.
  • Cursor too small or too large: Adjust the width property in the config objects (both normal and hover states). Also adjust strokeRadius to fit.

Note: This cursor’s behavior is heavily influenced by the combination of shape properties and the ease value. Experimentation is key to achieving the desired visual effect. Understanding how the lengths of the shapes are used in the generation of the animation is crucial. Too big of a number for width or too small of a number can also make the cursor look blank





Aphorbit

Aphorbit

The Aphorbit cursor is an image-based cursor that allows you to specify different images for the normal and hover states. This cursor provides control over the image's size, position, and blending.


Customizing the Normal Cursor State (cursor)

The cursor object controls the appearance and behavior of the cursor when it's not hovering over any specified elements. The Aphorbit cursor uses an image, whose properties are defined in the image object.

Image (image) Properties

The image object contains CSS properties to style the image of the cursor.

Property Description Example
width The width of the image. The height will typically scale proportionally. '50px'
imageUrl The URL of the image to use for the cursor. `/public/img/cursor.png`
Important: Ensure that the image is accessible and the URL is correct. Use WordPress media library to get the URL of your images.
backgroundColor The background color behind the image. Usually set to transparent. 'transparent'
opacity Transparency of the image. 1 (fully opaque)
borderRadius Rounded corners of the image. '0'
mixBlendMode The blending mode applied to the image. 'normal', 'multiply', 'screen' (See MDN for available CSS blending modes)
padding Padding around the image. 0
transitionDuration Duration of the transition effect. '0.05s'
transitionTimingFunction The easing function to use for the transition. 'ease-out'
activePoint Specifies the point within the image that acts as the "hotspot" (the exact pixel that interacts with the page). The values are relative to the *top-left* corner of the image. { x:5, y: 5 }

Options (options)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it. false (hides the default cursor)


Customizing the Hover State (hover)

The hover object controls the appearance and behavior of the cursor when it's hovering over specific elements.

Image (image) Properties (Hover)

These properties are the same as the normal state image properties but apply only when the cursor is hovering over the specified element. The key difference is often a different imageUrl.

See the "Image (image) Properties" section above for details on the properties.

Options (options) (Hover)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it on hover. false (hides the default cursor)
hoverSelector A CSS selector that specifies which elements should trigger the hover effect. 'a' (applies to all <a> elements), '.my-class' (applies to elements with the class "my-class")

Troubleshooting

  • Cursor not changing on hover: Make sure the hoverSelector is correctly targeting the desired elements. Double-check your CSS selectors.
  • Image not appearing: Ensure that the imageUrl is correct and the image is accessible. Check the browser's developer tools to confirm the image is loading. Also verify you have width set properly.
  • Transition not smooth: Check the transitionDuration and transitionTimingFunction properties.
  • Image isn't positioned at the correct point: Adjust the activePoint property. This determines the "hotspot" of the cursor. The x and y values are relative to the *top-left* corner of the image.

Note: This cursor requires valid image URLs. Ensure that the image file exists at the specified location. The position of your cursor will be relative to the activePoint property on the given image.





Persephont

Persephont

The Persephont cursor is a text-based cursor that utilizes an inner blurred circle and an outer text label. On hover, the inner circle expands, and the text changes.


Customizing the Normal Cursor State (cursor)

The cursor object controls the appearance and behavior of the cursor when it's not hovering over any specified elements. The Persephont cursor combines an inner blurred circle with an outer text element.

Inner Circle (inner) Properties

The inner object contains CSS properties to style the inner circle of the cursor.

Property Description Example
width Width of the inner circle. '100px'
height Height of the inner circle. '100px'
backdropFilter Applies a backdrop filter to the area behind the inner circle, creating a blurred effect on underlying content. 'blur(3px)'
backgroundColor Background color of the inner circle. A semi-transparent color is typically used to allow the backdrop filter to be visible. 'rgba(0,0,0,0.1)' (slightly transparent black)
borderColor Color of the border around the inner circle (often set to transparent). 'transparent'
borderWidth Width of the border (typically set to 0). 0
borderStyle Style of the border. 'solid'
borderRadius Rounded corners of the inner circle. Use '50%' for a perfect circle. '50%'
transitionDuration Duration of the transition effect when the inner circle changes position or size. '0.1s'
transitionTimingFunction The easing function to use for the transition of the inner circle. 'ease-out'
opacity The transparency of the inner circle. 1 (fully opaque)

Outer Text Label (outer) Properties

The outer object contains properties to style the outer text label of the cursor.

Property Description Example
width Width of the outer text label. Set to 'auto' to fit content. 'auto'
height Height of the outer text label. Set to 'auto' to fit content. 'auto'
text The text to display in the label. 'Cursor'
fontSize The font size of the text. '14px'
fontWeight The font weight of the text. 400 (normal)
color The color of the text. 'white'
borderColor Color of the border around the text label (typically transparent). 'transparent'
borderWidth Width of the border (typically set to 0). 0
borderStyle Style of the border. 'solid'
borderRadius Rounded corners of the text label. '0' (no rounded corners)
backgroundColor Background color of the text label (typically transparent). 'transparent'
opacity Transparency of the text label. 1 (fully opaque)
transitionDuration Duration of the transition effect. '0.1s'
transitionTimingFunction The easing function to use for the transition. 'ease-out'

Options (options)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it. false (hides the default cursor)
zIndex The stacking order of the element. Ensure it's high enough to be visible above other elements. '99'
mixBlendMode The blending mode applied to the element normal


Customizing the Hover State (hover)

The hover object controls the appearance and behavior of the cursor when it's hovering over specific elements.

Inner Circle (inner) Properties (Hover)

These properties are the same as the normal state inner properties but apply only when the cursor is hovering over the specified element. The inner circle *expands* on hover.

See the "Inner Circle (inner) Properties" section above for details on the properties.

Outer Text Label (outer) Properties (Hover)

These properties are the same as the normal state outer properties but apply only when the cursor is hovering over the specified element. The text *changes* on hover.

See the "Outer Text Label (outer) Properties" section above for details on the properties.

Options (options) (Hover)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it on hover. false (hides the default cursor)
hoverSelector A CSS selector that specifies which elements should trigger the hover effect. 'a' (applies to all <a> elements), '.my-class' (applies to elements with the class "my-class")
mixBlendMode The blending mode applied to the element normal

Troubleshooting

  • Cursor not changing on hover: Make sure the hoverSelector is correctly targeting the desired elements. Double-check your CSS selectors.
  • Blur effect not visible: Ensure that the backdropFilter property is set correctly in both normal and hover and ensure that there is content behind the inner circle for the blur to affect. Also, the backgroundColor of the inner circle should have some level of transparency.
  • Text label not displaying correctly: Check the text, fontSize, fontWeight, and color properties in the outer objects. Also, ensure width and height are set to auto.
  • Inner circle not transitioning smoothly: Ensure that transitionDuration is set to a reasonable time.
  • Cursor stacking issues: Adjust the zIndex property in the options object to ensure the cursor is on top of other elements.

Note: This cursor relies on a combination of CSS properties, including backdrop-filter, which might not be supported by all browsers. The text may not be visible with a conflicting z-index value so ensure a high z-index





Iriadient

Iriadient

The Iriadient cursor is an SVG-based cursor featuring a center shape and a rotating, color-shifting outer shape. This cursor is known for its visually dynamic and iridescent appearance.


Customizing the Normal Cursor State (cursor)

The cursor object controls the appearance and behavior of the cursor when it's not hovering over any specified elements. The Iriadient cursor consists of a center shape and an outer shape, both customizable.

Center Shape (centerShape) Properties

The centerShape object defines the properties of the shape at the very center of the cursor.

Property Description Example
fill The fill color of the center shape. '#000000' (black)
opacity Transparency of the center shape. 1 (fully opaque), 0.5 (50% transparent)
type The type of the center shape. There are 10 shapes available. 1 - 10

Outer Shape (outerShape) Properties

The outerShape object defines the properties of the outer shape of the cursor, including its rotation, color shifting, and blending.

Property Description Example
radius The radius of the outer shape (assumes it's circular). 50 (numeric value)
opacity Transparency of the outer shape. 1 (fully opaque), 0.5 (50% transparent)
mixBlendMode The blending mode applied to the outer shape. 'darken' makes the cursor darker where it overlaps content. 'darken', 'normal', 'multiply' (See MDN for available CSS blending modes)
rotationSpeed The speed at which the outer shape rotates. This value determines how quickly the shape spins. 0.1 (numeric value - adjust to control speed)
hueSpeed The speed at which the hue (color) of the outer shape changes. This creates the iridescent or color-shifting effect. 0.001 (numeric value - adjust for color change speed)
transitionDuration Duration of the transition effect. '0.1s'
transitionTimingFunction The easing function to use for the transition. 'ease-out'

Options (options)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it. false (hides the default cursor)


Customizing the Hover State (hover)

The hover object controls the appearance and behavior of the cursor when it's hovering over specific elements.

Center Shape (centerShape) Properties (Hover)

These properties are the same as the normal state centerShape properties but apply only when the cursor is hovering over the specified element.

See the "Center Shape (centerShape) Properties" section above for details on the properties.

Outer Shape (outerShape) Properties (Hover)

These properties are the same as the normal state outerShape properties, but they apply only when the cursor is hovering over the specified element. The key change here is usually the scaling of the circle.

See the "Outer Shape (outerShape) Properties" section above for details on the properties.

Options (options) (Hover)

Property Description Example
showDefaultCursor Determines whether to show the default system cursor or hide it on hover. false (hides the default cursor)
hoverSelector A CSS selector that specifies which elements should trigger the hover effect. 'a' (applies to all <a> elements), '.my-class' (applies to elements with the class "my-class")

Troubleshooting

  • Cursor not changing on hover: Make sure the hoverSelector is correctly targeting the desired elements. Double-check your CSS selectors.
  • Outer shape not rotating or changing color: Ensure that rotationSpeed and hueSpeed are set to non-zero values. Remember these effect are ongoing and subtle.
  • Outer shape not scaling correctly: Check that the scale property in the hover.outerShape object is set to a value other than 1.
  • Cursor not visible: Confirm the fill color of the center shape is set.

Note: This cursor relies on SVG transformations and dynamic color changes. The perceived effect can depend heavily on the content behind the cursor. The center and outer shapes are vital for seeing the effect. Be sure to check what is rendered.

Troubleshooting

Custom Cursor Plugin - Important Considerations

Performance Impact

Adding a large number of custom cursors to a single page is not recommended and may significantly impact the performance of your website. Each cursor adds overhead, and excessive cursors can lead to slow rendering and a degraded user experience. Use custom cursors judiciously.

Cursor Placement Strategy

When using the Custom Cursor plugin, careful consideration should be given to the placement of cursors.

  • Entire Site Cursors: If a custom cursor is applied to the entire site, it is strongly advised not to add any additional custom cursors to individual sections or elements on the page. A site-wide cursor should be the only custom cursor in effect.
  • Section-Specific Cursors: If you need to use multiple custom cursors on a single page, ensure that all cursors are applied to specific sections or elements and not to the entire site. This allows for localized customization without impacting the overall performance.

Customization Warning

Customizing the CSS values of your custom cursors provides powerful flexibility, but it also introduces potential risks. Incorrect or invalid CSS values can cause the plugin to malfunction or stop working correctly. This can lead to unexpected behavior and a broken user experience.

Therefore, please read the documentation carefully and thoroughly understand the CSS properties before customizing a cursor. It is crucial to ensure that all CSS values are valid and compatible with the plugin's functionality. Start with small, incremental changes and test thoroughly after each modification.

Troubleshooting

If, for any reason, the Custom Cursor plugin stops working unexpectedly, the first troubleshooting step should be to click the "Reset All Cursors" button in the Settings page. This will revert all cursors to their default settings and may resolve any conflicts or incorrect configurations that are causing the issue. If the problem persists after resetting, consult the documentation or contact support for further assistance.