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
Hover this area Glowing halo

Glow Effect

Glowing halo that follows the cursor.

JS Glow
Hover this area Dot trail

Cursor Trail

Dot trail that follows the movement.

JS Trail
Magnetic

Magnetic Effect

The element is attracted toward the cursor.

JS Interactive
HIDDEN TEXT

Spotlight Reveal

The cursor reveals hidden content.

JS Reveal
Hover this area Emoji cursor

Emoji Cursor

Replaces the cursor with an emoji.

JS Fun

Illuminated Content

The cursor lights up the content

Spotlight effect

Cursor Spotlight

Spotlight effect that illuminates content on hover.

JS Spotlight
Move your mouse here Continuous ripples

Cursor Ripple

Creates ripples on cursor movement.

JS Ripple
Hover this area Following text

Cursor Text

Displays coordinates or custom text.

JS Info
Link
Adaptive cursor

Cursor Morph

The cursor changes shape based on the hovered element.

JS Adaptive
Circle with mix-blend-mode

Custom Circle Cursor

Circle cursor with contrast effect and enlargement on hover.

JS Blend
Hover this area Trainee fluide en 5 points

Cursor Trail Effect

Cursor trail with 5 points and fading opacity.

JS Trail
Expanding cursor

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
Move cursor to illuminate CSS spotlight effect

Spotlight Cursor

Spotlight effect that follows the cursor with a radial gradient.

JS Gradient
REVEAL ME
Text reveal

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
💎

Secret content discovered!

Find the hidden treasures
Move your cursor to illuminate

Cursor Spotlight

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

CSS Radial Gradient Custom Properties
Move cursor here

Trail Particles

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

JS Canvas requestAnimationFrame
Move cursor to create ripples

Cursor Ripple Field

Cursor movement creates circles that expand like raindrops.

JS Animation Ripple
🔗
Link
Action
Drag

Custom Cursor States

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

JS CSS Cursor
Tilt me

Cursor Tilt Effect

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

JS CSS 3D Perspective
CURSOR ALCHEMY TRANSFORMS DIGITAL EXPERIENCE

Cursor Text Scramble

Text near the cursor scrambles then progressively reconstitutes.

JS Text Interactive
Move cursor to see the elasticity

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

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.