Smooth Cursor

A smooth, springy trail that follows the cursor

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

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.