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

Link Example

Appearance

Cursor Size 5-100 pixels

Default size of the cursor dot in pixels. Smaller values create a subtle pointer, larger values make it more prominent.

Default: 20

Cursor Size Hover 5-200 pixels

Size of the cursor when hovering over interactive elements. Set larger than the default size to create an expanding effect on hover.

Default: 60

Cursor Color color picker

Background color of the cursor dot. Works best with solid colors when using blend modes.

Default: #ffffff (White)

Cursor Opacity 0.0-1.0

Transparency of the cursor. 1 is fully opaque, 0 is invisible. Use lower values for a more subtle effect.

Default: 1

Border Radius 0-50 percent

Roundness of the cursor corners. 50% creates a perfect circle, 0% creates a square.

Default: 50

Border

Border Width 0-10 pixels

Thickness of the cursor border. Set to 0 for no border. Use with a transparent cursor color to create a ring effect.

Default: 0

Border Color color picker

Color of the cursor border. Only visible when Border Width is greater than 0.

Default: #ffffff (White)

Animation

Cursor Speed 0.01-1.0

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

Cursor Blend Mode select

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

Blend Mode Selector CSS selector

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

Hover Selector CSS selector

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"

Hide Native Cursor on/off

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

Fluid Mask Enabled on/off

Enables integration with the Fluid Cursor element. When active, the cursor position is shared with fluid effects for synchronized animations.

Default: Off

Fluid Mask Selector CSS selector

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.