Smooth Cursor

Canvas-based smooth cursor trail with spring physics

smooth-cursor-tw

Move your cursor

The smooth trail will follow

Customize

Tweak the props live

Trail Settings

Points Count60

Line Width1

Smooth Factor2

Velocity Scale

Physics

Spring Strength0.4

Dampening0.5

Appearance

Color

#000000

Blur9

Trail Opacity0.1

Mix Blend Mode

Props

Name	Type	Default	Description
`className`	string	`""`	Additional CSS classes for the container.
`pointsCount`	number	`40`	Number of trail points that follow the cursor.
`lineWidth`	number	`0.3`	Width factor for the trail line. Higher values create thicker trails.
`springStrength`	number	`0.4`	Spring force strength. Higher values make the trail follow faster.
`dampening`	number	`0.5`	Dampening/friction factor. Lower values create more fluid motion.
`color`	string	`"#000000"`	Color of the cursor trail (hex, rgb, or named color).
`blur`	number	`0`	Blur amount in pixels. Creates a glowy, ethereal effect.
`mixBlendMode`	GlobalCompositeOperation	`"source-over"`	Canvas blend mode for the trail. Options include 'multiply', 'screen', 'overlay', 'difference', etc.
`velocityScale`	boolean	`false`	Makes the trail dynamically thicker when moving faster, creating a reactive effect.
`trailOpacity`	number	`1`	Base opacity for the entire trail (0-1). Useful for subtle effects.
`smoothFactor`	number	`1`	Controls curve smoothness. Higher values create smoother curves, lower values create more angular paths.

classNamestring

Additional CSS classes for the container.

Default:""

pointsCountnumber

Number of trail points that follow the cursor.

Default:40

lineWidthnumber

Width factor for the trail line. Higher values create thicker trails.

Default:0.3

springStrengthnumber

Spring force strength. Higher values make the trail follow faster.

Default:0.4

dampeningnumber

Dampening/friction factor. Lower values create more fluid motion.

Default:0.5

colorstring

Color of the cursor trail (hex, rgb, or named color).

Default:"#000000"

blurnumber

Blur amount in pixels. Creates a glowy, ethereal effect.

Default:0

mixBlendModeGlobalCompositeOperation

Canvas blend mode for the trail. Options include 'multiply', 'screen', 'overlay', 'difference', etc.

Default:"source-over"

velocityScaleboolean

Makes the trail dynamically thicker when moving faster, creating a reactive effect.

Default:false

trailOpacitynumber

Base opacity for the entire trail (0-1). Useful for subtle effects.

Default:1

smoothFactornumber

Controls curve smoothness. Higher values create smoother curves, lower values create more angular paths.

Default:1