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.
Preview
✓ Displays an editor overlay for the normally hidden draggable cursor area, allowing easy placement, organization, and management of cursor elements..
Placed in the top-right for faster, more comfortable editing access to nearby controls.
Cursor Fade
✓ Controls the fade transition speed when the cursor content appears or disappears. Speed: 0ms → 1000ms, Range: 0/1000
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. Choose between a flat 2D rotation or a realistic 3D perspective transform on one or both axes. Resistance controls how freely the cursor responds to the motion.
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.
Blending: Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Color Burn, Hard Light, Soft Light, Difference, Exclusion, Hue, Saturation, Color, Luminosity
Advanced
✓ Adds custom CSS utility classes to extend styling and behavior. & Displays usage note.
