v1.3.6
MENU ANIMATIONS
ADVANCED EFFECTS
CORE BACKGROUND
Custom Cursor
Replaces the default browser cursor with a customizable animated dot that smoothly follows mouse movement. Features hover states, blend modes, and optional integration with fluid effects. Perfect for creative portfolios, agency websites, or any project requiring a unique interactive experience.
Move your mouse in this area
Hover over the buttons and link to see the cursor expand
Appearance
Default size of the cursor dot in pixels. Smaller values create a subtle pointer, larger values make it more prominent.
Default: 20
Size of the cursor when hovering over interactive elements. Set larger than the default size to create an expanding effect on hover.
Default: 60
Background color of the cursor dot. Works best with solid colors when using blend modes.
Default: #ffffff (White)
Transparency of the cursor. 1 is fully opaque, 0 is invisible. Use lower values for a more subtle effect.
Default: 1
Roundness of the cursor corners. 50% creates a perfect circle, 0% creates a square.
Default: 50
Border
Thickness of the cursor border. Set to 0 for no border. Use with a transparent cursor color to create a ring effect.
Default: 0
Color of the cursor border. Only visible when Border Width is greater than 0.
Default: #ffffff (White)
Animation
How quickly the cursor follows the mouse. Lower values create a smooth, trailing effect. Higher values make it more responsive and snappy. 1.0 means instant following with no lag.
Default: 0.15
Blend Mode
CSS blend mode applied to the cursor. "difference" inverts colors underneath for high contrast. "normal" shows the cursor color as-is. Other options include: multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, exclusion, hue, saturation, color, luminosity.
Default: difference
CSS selector for elements where the blend mode should be active. Leave empty to apply blend mode everywhere. Example: ".dark-section, #hero" would only apply the blend mode when hovering over those elements.
Default: empty (applies everywhere)
Interaction
CSS selector for elements that trigger the hover state (cursor size expansion). Use comma-separated selectors for multiple elements. Example: "a, button, .card, [data-hover]".
Default: "a, button"
Hides the browser's default cursor. Keep this on for the best experience. Turn off if you want to show both cursors simultaneously.
Default: On
Fluid Integration
Enables integration with the Fluid Cursor element. When active, the cursor position is shared with fluid effects for synchronized animations.
Default: Off
CSS selector for elements where fluid mask integration should activate. Only works when Fluid Mask Enabled is on. Example: ".fluid-section".
Default: empty
Performance
This element is lightweight and won't slow down your site. It uses requestAnimationFrame for smooth 60fps animation and CSS transitions for hover effects. The cursor is rendered as a single DOM element with hardware-accelerated transforms.