Mouse Trailer
A mouse trailer with bunch of customization options including blur, fade, and custom image.
Examples
Implementation of mouse trailer
Configure the way you like
Installation
npx shadcn@latest add "https://aetherui.in/c/mouse-trailer.json"
Component Props
You can customize the content of the mouse trailer by passing the following props to the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| trailLength | number | 20 | The number of points in the trail. |
| speed | number | 3 | The speed of the trail. |
| blur | {enabled:boolean, intensity:number} | {enabled: false, intensity: 5} | The blur effect of the trail. |
| fade | {enabled:boolean, startOpacity:number, endOpacity:number} | {enabled: false, startOpacity: 1, endOpacity: 0.1} | The fade effect of the trail. |
| customImage | object | The custom image to be used for the trail. | |
| color | string | #3B82F6 | The color of the trail. |
| size | number | 12 | The size of the trail. |
| springPreset | {stiffness:number, damping:number, mass:number} | strict-controlled | The spring preset for the trail. |
| className | string | Additional class names to be applied to the mouse trailer. |