Intro
Custom Cursor adds customizable cursor effects and interactive content positioning. Users can control preview visibility, fade speed, and cursor offsets with simple settings.It also supports showing the native system cursor alongside custom elements. Designed for smooth, modern, and lightweight UI interactions.
Touch Device Optimized: The component automatically detects touch-only devices and disables all cursor-related logic entirely, no event listeners, no style injection, no animations. Zero overhead.
AI ready
Fully compatible with the Elements AI Assistant. Every option now carries a clear, plain-language description, so the AI understands what each setting does, how the options work together, and the best way to use the component.
Just describe the effect you want. Ask for "a cursor that glides after the mouse with a soft delay and tilts in 3D" and the AI sets follow, tilt, fade and position for you. It also knows how nested cursors work together, and which content suits the cursor area.
Preview
✓ Displays an editor overlay for the normally hidden draggable cursor area, allowing easy placement, organization, and management of cursor elements.
Cursor Fade
✓ Controls the fade transition speed when the cursor content appears or disappears.
Cursor Follow ←
✓ Adds a smooth inertia effect to the cursor, making it follow the mouse with a natural, fluid delay. It enhances the overall motion with elegance and emphasis, and when used in nested groups, it visually reinforces the hierarchy between parent and child elements.
Cursor Tilt ←
✓ Adds a natural tilt effect to the cursor, making it lean in the direction of mouse movement.
Cursor Position
✓ Adjusts the horizontal and vertical offset of the custom cursor content; by default it appears slightly below and to the right of the center.
Show Native Cursor
✓ Shows the system cursor together with custom content, useful for adding simple overlays like labels or extra styling without replacing the native cursor.
Blending mode ←
✓ Applies blend modes to control how the cursor layer interacts with page content.
Advanced
✓ Adds custom CSS utility classes to extend styling and behavior. & Displays usage note.
