How to create a unique cursor that reinforces your site's identity? These 26 JavaScript cursor effects cover the most requested patterns: smooth follower, particle trail, spotlight, magnetic cursor and contextual interactions. Ideal for creative portfolios and premium sites.

Hover this area Dot + ring cursor

Dot Follower

Central dot with a ring that follows with delay.

JS Smooth

Glow Effect

Glowing halo that follows the cursor.

JS Glow

Cursor Trail

Dot trail that follows the movement.

JS Trail

Magnetic Effect

The element is attracted toward the cursor.

JS Interactive

Spotlight Reveal

The cursor reveals hidden content.

JS Reveal

Emoji Cursor

Replaces the cursor with an emoji.

JS Fun

Cursor Spotlight

Spotlight effect that illuminates content on hover.

JS Spotlight

Cursor Ripple

Creates ripples on cursor movement.

JS Ripple

Cursor Text

Displays coordinates or custom text.

JS Info

Cursor Morph

The cursor changes shape based on the hovered element.

JS Adaptive

Custom Circle Cursor

Circle cursor with contrast effect and enlargement on hover.

JS Blend

Cursor Trail Effect

Cursor trail with 5 points and fading opacity.

JS Trail

Cursor Expand

The cursor expands differently depending on the element type.

JS Interactive

Magnetic Cursor

The element follows the cursor with a subtle magnetic effect.

JS CSS Variables

Spotlight Cursor

Spotlight effect that follows the cursor with a radial gradient.

JS Gradient

Cursor Text Reveal

The cursor reveals the text with a circular clip-path effect.

JS Clip-path
X: 0 Y: 0

Magnetic Elements

Elements move toward the cursor when it's nearby, with an elastic return.

JS Mouse Transform

Cursor Spotlight

A light halo follows the cursor and reveals hidden content beneath a dark veil.

CSS Radial Gradient Custom Properties

Trail Particles

The cursor leaves a trail of luminous particles that fade with physics.

JS Canvas requestAnimationFrame

Cursor Ripple Field

Cursor movement creates circles that expand like raindrops.

JS Animation Ripple

Custom Cursor States

The cursor changes shape based on context: circle, diamond or dashed circle.

JS CSS Cursor

Cursor Tilt Effect

The card tilts in 3D toward the cursor position with a dynamic light reflection.

JS CSS 3D Perspective

Cursor Text Scramble

Text near the cursor scrambles then progressively reconstitutes.

JS Text Interactive

Elastic Cursor

A custom cursor that stretches in the direction of movement and bounces when stopping.

JS Transform Physics

Cursor Color Sampler

The cursor picks up the color of the hovered area and uses it as a luminous halo.

JS CSS Variables Color

Gravity Well Cursor

Elements near the cursor undergo gravitational attraction creating a distortion field.

JS Physics requestAnimationFrame

Jack-o'-Lantern Cursor

Pumpkin-head cursor that scatters a trail of tiny pumpkins fading away quickly. Playful, immersive, 100% canvas (no external model or image).

💡 Perfect for: Halloween page/landing, seasonal giveaway, easter-egg, event header, children's page.

Cursor Canvas Trail Premium

Séance Cursor

Interactive Ouija board: the planchette follows the cursor, nearby letters glow and a spectral thread traces the message. Eerie, immersive, perfect for Halloween.

💡 Perfect for: Halloween hero/landing, page easter-egg, interactive quiz/game, haunted 404 page, event teaser.

Cursor Canvas Interactive Premium

Frequently Asked Questions

How to create a custom cursor in JavaScript? +

Hide the native cursor with cursor:none. Create a div element that follows the mouse via mousemove. Use transform:translate(x,y) with smoothing (lerp) for fluid movement. RequestAnimationFrame for the render loop.

How to make a follower cursor with smoothing? +

Use Linear Interpolation (lerp): position = position + (target - position) * speed. With speed=0.1 for slow elegant tracking, 0.5 for more responsive tracking. Update in requestAnimationFrame.

Do custom cursors impact performance? +

A single follower cursor has negligible impact. Particle trails are heavier -- limit to 20-30 particles. Pause the animation when the window is not active (visibilitychange event).

Do custom cursors work on mobile? +

No -- touch devices don't have a cursor. Detect pointer type with window.matchMedia('(pointer: fine)') and only enable cursor effects on desktop. Always provide a fallback.

How to create a magnetic cursor on buttons? +

Listen for mousemove on the button. Calculate the distance between the cursor and the button center. If it's below a threshold, move the button toward the cursor with transform:translate. Add a transition for the return.