Custom Cursor
Interactive cursor component with smooth animations and target morphing
custom-cursor-tw
With Image
No Image
Circle
Customize
40px
6px
150
20
300
30
2px
0px
Props
| Name | Type | Default | Description |
|---|---|---|---|
| circleSize | number | 40 | Size of the outer circle in pixels |
| dotSize | number | 6 | Size of the inner dot in pixels |
| circleColor | string | "rgb(0, 0, 0)" | Color of the outer circle (any valid CSS color) |
| dotColor | string | "rgb(0, 0, 0)" | Color of the inner dot (any valid CSS color) |
| circleStiffness | number | 150 | Spring stiffness for the outer circle (higher = faster) |
| circleDamping | number | 20 | Spring damping for the outer circle (higher = less bounce) |
| dotStiffness | number | 300 | Spring stiffness for the inner dot (higher = faster) |
| dotDamping | number | 30 | Spring damping for the inner dot (higher = less bounce) |
| circleBorderWidth | number | 2 | Border width of the outer circle in pixels |
| className | string | "" | Additional class name for the container |
| circleClassName | string | "" | Additional class name for the circle |
| dotClassName | string | "" | Additional class name for the dot |
| showOnTouch | boolean | false | Whether to show the cursor on touch devices |
| zIndex | number | 9999 | Z-index of the cursor |
| elastic | boolean | false | Enable subtle elastic stretch in direction of movement |
| imageClassName | string | "" | Additional class name for the image elements |
| targetPadding | number | 0 | Padding between cursor and target in pixels |
| targets | string[] | [] | CSS selectors for target elements to trigger effects on hover |
| images | (string | undefined)[] | [] | Image URLs corresponding to each target (optional - targets without images will still morph the cursor) |
| imageScale | number | 0.9 | Scale amount for images when hovering targets (0-1) |
| imageAnimationDuration | number | 0.6 | Duration of image scale animation in seconds |
| mixBlendMode | string | undefined | Mix blend mode for the cursor elements |
| children | React.ReactNode | undefined | Custom content to render inside the cursor |