Say no to ordinary cursors!
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.
You will need the following to use this plugin.
This plugin is cross-theme compatible, ensuring it works seamlessly with any WordPress theme, regardless of design or layout.
You can install the WP Custom Cursors plugin in two ways:
wp-custom-cursors.zip
. This is the file you need to upload as a new plugin.You're all set! Enjoy customizing your website's cursor with WP Custom Cursors!
Once you click Add to the Site, a popup will appear with a dropdown menu for placement options:
.custom-cursor
).#header-cursor
)..custom-cursor
, the cursor will be applied to every section with the class custom-cursor
.
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.
<body>
or a main container, avoid adding another cursor to child sections within it.
.custom-cursor
), ensure this class is not used in multiple places unintentionally.#header-cursor
), it will override any class-based cursors within that section.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.
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.
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!
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.
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.
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.
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.
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.
From this page, you have the option to edit the cursor settings or remove the cursor from your site.
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.
cursor
)The cursor
object controls the appearance and behavior of the cursor when it's not hovering over any specified elements.
outer
) PropertiesThe outer
object contains CSS properties to style the outer circle of the cursor.
inner
) PropertiesThe inner
object contains CSS properties to style the inner circle of the cursor.
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) |
hover
)The hover
object controls the appearance and behavior of the cursor when it's hovering over specific elements.
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
) 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
) (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") |
hoverSelector
is correctly targeting the desired elements. Double-check your CSS selectors.zIndex
property to ensure the cursor is on top of other elements.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.
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.
cursor
)The cursor
object controls the appearance and behavior of the cursor when it's not hovering over any specified elements.
outer
) PropertiesThe outer
object contains CSS properties to style the outer circle of the cursor.
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) |
hover
)The hover
object controls the appearance and behavior of the cursor when it's hovering over specific elements.
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
) (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") |
hoverSelector
is correctly targeting the desired elements. Double-check your CSS selectors.zIndex
property to ensure the cursor is on top of other elements.transitionDuration
and transitionTimingFunction
properties.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.
The Posquareon cursor consists of an outer circle and an inner circle, with the outer circle expanding on hover.
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
) PropertiesThe outer
object contains CSS properties to style the outer circle of the cursor.
inner
) PropertiesThe inner
object contains CSS properties to style the inner circle of the cursor.
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) |
hover
)The hover
object controls the appearance and behavior of the cursor when it's hovering over specific elements.
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
) 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
) (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") |
hoverSelector
is correctly targeting the desired elements. Double-check your CSS selectors.zIndex
property to ensure the cursor is on top of other elements.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.
The Apollonix cursor features both an inner and outer circle. On hover, the inner circle shrinks.
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
) PropertiesThe inner
object contains CSS properties to style the inner circle of the cursor.
outer
) PropertiesThe outer
object contains CSS properties to style the outer circle of the cursor.
options
)Property | Description | Example |
---|---|---|
showDefaultCursor |
Determines whether to show the default system cursor or hide it. | true (shows the default cursor) |
hover
)The hover
object controls the appearance and behavior of the cursor when it's hovering over specific elements.
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
) 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
) (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") |
hoverSelector
is correctly targeting the desired elements. Double-check your CSS selectors.zIndex
property to ensure the cursor is on top of other elements.transitionDuration
and transitionTimingFunction
properties.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.
The Hadexagon cursor is characterized by a simple bordered circle that expands upon hovering.
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
) PropertiesThe outer
object contains CSS properties to style the outer circle of the cursor.
options
)Property | Description | Example |
---|---|---|
showDefaultCursor |
Determines whether to show the default system cursor or hide it. | true (shows the default cursor) |
hover
)The hover
object controls the appearance and behavior of the cursor when it's hovering over specific elements.
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
) (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") |
hoverSelector
is correctly targeting the desired elements. Double-check your CSS selectors.zIndex
property to ensure the cursor is on top of other elements.transitionDuration
and transitionTimingFunction
properties.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.
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.
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
) PropertiesThe inner
object contains CSS properties to style the inner circle of the cursor.
outer
) PropertiesThe outer
object contains CSS properties to style the outer circle of the cursor.
options
)Property | Description | Example |
---|---|---|
showDefaultCursor |
Determines whether to show the default system cursor or hide it. | true (shows the default cursor) |
hover
)The hover
object controls the appearance and behavior of the cursor when it's hovering over specific elements.
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
) 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
) (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") |
hoverSelector
is correctly targeting the desired elements. Double-check your CSS selectors.zIndex
property to ensure the cursor is on top of other elements.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.borderColor
, borderWidth
, and borderStyle
are all set correctly for the outer circle.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.
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.
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.
centerShape
) PropertiesThe centerShape
object defines the properties of the shape at the very center of the cursor.
middleShape
) PropertiesThe middleShape
object defines the properties of the shape between the center and outer shapes.
outerShape
) PropertiesThe outerShape
object defines the properties of the outermost shape of the cursor.
text
) PropertiesThe text
object defines the properties of the circular text around the cursor.
svgShape
) PropertiesThe svgShape
object contains properties that apply to the overall SVG element.
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) |
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
) (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") |
hoverSelector
is correctly targeting the desired elements. Double-check your CSS selectors.zIndex
property in the svgShape
object to ensure the cursor is on top of other elements.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.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.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.
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.
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.
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
) PropertiesThe inner
object contains CSS properties to style the inner circle of the cursor.
outer
) PropertiesThe outer
object contains CSS properties to style the outer text label of the cursor.
options
)Property | Description | Example |
---|---|---|
showDefaultCursor |
Determines whether to show the default system cursor or hide it. | false (hides the default cursor) |
hover
)The hover
object controls the appearance and behavior of the cursor when it's hovering over specific elements.
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
) 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
) (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") |
hoverSelector
is correctly targeting the desired elements. Double-check your CSS selectors.zIndex
property in the outer
object to ensure the cursor is on top of other elements.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.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.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.
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.
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.
config
) PropertiesThe config
object contains properties that control the image trail effect.
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.threshold
property. Lower values create a denser, longer trail, while higher values create a shorter, sparser trail.blendingMode
values to achieve the desired visual effect.filter
property to adjust the image appearance (e.g., add blur, change the color).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.
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.
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
) PropertiesThe inner
object contains CSS properties to style the inner circle of the cursor.
outer
) PropertiesThe 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.
options
)Property | Description | Example |
---|---|---|
showDefaultCursor |
Determines whether to show the default system cursor or hide it. | false (hides the default cursor) |
hover
)The hover
object controls the appearance and behavior of the cursor when it's hovering over specific elements.
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
) 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
) (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") |
hoverSelector
is correctly targeting the desired elements. Double-check your CSS selectors.zIndex
property in the outer
object to ensure the cursor is on top of other elements.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.transitionDuration
is set to a reasonable time.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.
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.
The Hestellipse cursor's shape is determined by an SVG path. Customization mainly involves modifying the path's visual attributes.
svg
) PropertiesThe svg
object contains properties related to the overall SVG container.
path
) PropertiesThe 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).
stroke
property is set to a color and that strokeWidth
is greater than zero. Also ensure that your path is properly visible and formed.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.
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.
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.
config
) PropertiesThe config
object contains the properties that control the gooey SVG cursor effect.
columns
, can be computationally expensive. Be mindful of performance, especially on lower-powered devices.backgroundColor
is set to a visible color and that the columns
value is not set to 0 or an extremely high value.columns
to improve performance. Also, consider simplifying the page content behind the cursor, as blending modes can be resource-intensive.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.
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.
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".
config
) PropertiesThe config
object contains the properties that govern the fluid simulation.
simResolution
, dyeResolution
, and disabling shading
, bloom
, and sunrays
will significantly improve performance.transparent
to true can be particularly demanding on performance.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.simResolution
and dyeResolution
, and disable shading
, bloom
, and sunrays
.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.
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.
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.
shape1
) PropertiesThe 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) |
shape2
) PropertiesThe 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) |
shape3
) PropertiesThe 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) |
config
) PropertiesThe 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
)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) |
hover
)The hover
object controls the appearance and behavior of the cursor when it's hovering over specific elements.
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
) (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") |
hoverSelector
is correctly targeting the desired elements. Double-check your CSS selectors.ease
property. A lower value makes the cursor more responsive.color
properties for shape1
, shape2
, and shape3
are set to valid color values.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
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.
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
) PropertiesThe image
object contains CSS properties to style the image of the cursor.
options
)Property | Description | Example |
---|---|---|
showDefaultCursor |
Determines whether to show the default system cursor or hide it. | false (hides the default cursor) |
hover
)The hover
object controls the appearance and behavior of the cursor when it's hovering over specific elements.
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
) (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") |
hoverSelector
is correctly targeting the desired elements. Double-check your CSS selectors.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.transitionDuration
and transitionTimingFunction
properties.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.
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.
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
) PropertiesThe inner
object contains CSS properties to style the inner circle of the cursor.
outer
) PropertiesThe outer
object contains properties to style the outer text label of the cursor.
options
)hover
)The hover
object controls the appearance and behavior of the cursor when it's hovering over specific elements.
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
) 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
) (Hover)hoverSelector
is correctly targeting the desired elements. Double-check your CSS selectors.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
, fontSize
, fontWeight
, and color
properties in the outer
objects. Also, ensure width
and height
are set to auto.transitionDuration
is set to a reasonable time.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
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.
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.
centerShape
) PropertiesThe centerShape
object defines the properties of the shape at the very center of the cursor.
outerShape
) PropertiesThe outerShape
object defines the properties of the outer shape of the cursor, including its rotation, color shifting, and blending.
options
)Property | Description | Example |
---|---|---|
showDefaultCursor |
Determines whether to show the default system cursor or hide it. | false (hides the default cursor) |
hover
)The hover
object controls the appearance and behavior of the cursor when it's hovering over specific elements.
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.
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
) (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") |
hoverSelector
is correctly targeting the desired elements. Double-check your CSS selectors.rotationSpeed
and hueSpeed
are set to non-zero values. Remember these effect are ongoing and subtle.scale
property in the hover.outerShape
object is set to a value other than 1.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.
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.
When using the Custom Cursor plugin, careful consideration should be given to the placement of cursors.
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.
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.