Smooth Cursor
Canvas-based smooth cursor trail with spring physics
smooth-cursor-tw
Move your cursor
The smooth trail will follow
Customize
60
1
0.4
0.5
9
0.1
2
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. |