What the cursor component does
When the page contains the attribute data-anim-cursor,
the module automatically injects a custom cursor element and replaces
the default browser cursor.
- Hides the native browser cursor.
- Creates a custom pointer element that follows the mouse.
-
Detects interactive elements such as
buttons,links, and inputs. - Applies hover and active states automatically.
- Optionally adds a delayed shadow cursor.
- Automatically disables itself on mobile devices.
src/components/ui/cursor/
Enable the custom cursor
To enable the cursor, add the required attribute
data-anim-cursor to the page wrapper.
<body data-anim-cursor>
...
</body>When the page loads, the cursor module will automatically initialize and inject the cursor elements into the DOM.
Enable the shadow cursor
You can optionally enable an animated shadow cursor for additional visual depth.
<body data-anim-cursor data-anim-cursor-shadow>
...
</body>When enabled, the cursor module will automatically create an additional shadow element that follows the main cursor with a slight delay.
Generated DOM structure
After initialization, the cursor module injects the following structure into the page:
<div class="anim-cursor">
<span class="anim-cursor__pointer"></span>
<span class="anim-cursor__shadow"></span>
</div>Cursor states
The cursor automatically switches between states depending on user interaction.
-
--hover— activated when hovering interactive elements -
--active— activated when the mouse button is pressed
a, button, input,
or any element that has a custom cursor style applied.
Mobile behavior
The custom cursor module automatically disables itself on mobile devices. This prevents unnecessary DOM updates and improves performance on touch devices.
isMobile.any() from the core utilities.
Download
Want a ready-to-use animated cursor system with hover detection, shadow cursor support, and mobile-safe behavior? Download the template and build faster.