Loading...
The Magical Mouse component creates a magical mouse effect. It supports hover effects, color changes, and pixel shape customization.
Installation
npx shadcn@latest add "https://bucharitesh.in/r/magical-mouse"Props
| Prop | Type | Description | Default |
|---|---|---|---|
| icon | React.ReactNode | Icon to be used in the component | Sparkle from lucide-react |
| starAnimationDuration | number | Duration of the star animation in milliseconds | 1500 |
| minimumTimeBetweenStars | number | Minimum time between star spawns in milliseconds | 250 |
| minimumDistanceBetweenStars | number | Minimum distance between star spawns in pixels | 75 |
| glowDuration | number | Duration of the glow effect in milliseconds | 75 |
| maximumGlowPointSpacing | number | Maximum spacing between glow points in pixels | 10 |
| colors | string[] | Colors for the stars in RGB format | ["249 146 253", "252 254 255"] |
| sizes | string[] | Sizes for the stars | ["1.4rem", "1rem", "0.6rem"] |
| className | string | Custom class name | "" |
Credits
- Credit to @Hyperplexed for the video.