Aura Cursor
A lightweight, customizable library for creating custom cursors in modern web applications. Create beautiful cursors that follow your mouse with smooth animations and interactive hover effects. Try the controls on the side to see different configurations in real-time.
Customizable
Control size, color, opacity, speed and much more through simple props. Full TypeScript support.
Performance
Optimized for performance with smooth animations using requestAnimationFrame. Small bundle size and zero dependencies.
Smart Detection
Automatically detects interactive elements (links, buttons, etc.) and applies special hover effects. Automatically hides when the mouse leaves the window.
Flexible
Multiple modes: outline mode, interactive-only, customizable center dot. Works with React, HTML/JavaScript and TypeScript.
Installation
npm install aura-cursorOr using yarn:
yarn add aura-cursorOr using pnpm:
pnpm add aura-cursorHow to Use
Basic example with React:
import { AuraCursor } from "aura-cursor/react";
function App() {
return (
<>
<AuraCursor
size={30}
color="#3b82f6"
opacity={0.5}
speed={0.2}
hideDefaultCursor={true}
hoverColor="#3c096c"
hoverEffect={{
scale: 1.8,
color: "#3c096c",
opacity: 0.5,
}}
/>
<YourApp />
</>
);
}Or using the hook:
import { useAuraCursor } from "aura-cursor/react";
function App() {
useAuraCursor({
size: 30,
color: "#3b82f6",
opacity: 0.5,
speed: 0.2
});
return <div>Your app content</div>;
}Or using vanilla JavaScript:
import { AuraCursor } from "aura-cursor";
const cursor = new AuraCursor({
size: 30,
color: "#3b82f6",
opacity: 0.5,
speed: 0.2,
hideDefaultCursor: true,
hoverColor: "#3c096c",
hoverEffect: {
scale: 1.8,
color: "#3c096c",
opacity: 0.5,
},
});
// Initialize the cursor
cursor.init();API Reference
All available props to customize Aura Cursor:
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 30 | Cursor size in pixels |
color | string | "#3b82f6" | Main cursor color (hex, rgb, etc) |
opacity | number | 0.5 | Cursor opacity (0-1) |
speed | number | 0.2 | Animation speed (0-1) |
hideDefaultCursor | boolean | true | Hide browser default cursor |
outlineMode | boolean | false | Enable outline mode (outline only) |
outlineWidth | number | 2 | Outline width in pixels |
centerDotColor | string | "#3b82f6" | Center dot color |
centerDotSize | number | 10 | Center dot size in pixels |
hoverColor | string | "#3c096c" | Color when hovering interactive elements |
centerDotHoverColor | string | "#3c096c" | Center dot color on hover |
hoverEffect | object | - | Effects applied on hover |
hoverEffect.scale | number | 1.8 | Cursor scale on hover |
hoverEffect.color | string | "#3c096c" | Cursor color on hover |
hoverEffect.opacity | number | 0.5 | Cursor opacity on hover |