Smooth Cursor

Canvas-based smooth cursor trail with spring physics

smooth-cursor-tw

Move your cursor

The smooth trail will follow

Customize

Points Count

Line Width

1.00

Smooth Factor

2.0

Velocity Scale

Spring Strength

0.40

Dampening

0.50

Color

Blur

9.0

Trail Opacity

0.10

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.

Default40

lineWidthnumber

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

Default0.3

springStrengthnumber

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

Default0.4

dampeningnumber

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

Default0.5

colorstring

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

Default"#000000"

blurnumber

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

Default0

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.

Defaultfalse

trailOpacitynumber

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

Default1

smoothFactornumber

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

Default1