Smooth Cursor
Scoped dot-and-ring cursor that eases behind the pointer and grows over targets.
motionpointer
Customize
Cursor
Parts
Ring size34px
Dot size6px
Style
Color
Difference blend
Hide native cursor
Motion
Smoothing0.14
Lower floats further behind the pointer.
Trail ghosts4
Hover growth1.8×
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "both" | "ring" | "dot" | "both" | Which cursor parts to draw. |
size | number | 34 | Ring diameter in pixels. |
dotSize | number | 6 | Dot diameter in pixels. |
smooth | number | 0.14 | Ring follow smoothing (0.02 = floaty, 0.4 = tight). |
trail | number | 0 | Number of ghost dots trailing the cursor (0 disables). |
growScale | number | 1.8 | Ring growth over links, buttons and [data-cursor-hover]. |
blend | boolean | false | Blend the cursor with what's underneath (difference). |
color | string | "var(--brand)" | Cursor color (any CSS color). |
hideNative | boolean | true | Hide the native cursor inside the area. |
children* | ReactNode | — | The hover area the cursor lives in. |