Custom Mouse Effects for Modern Web Apps – Aura Cursor

Aura Cursor is a lightweight JavaScript library that creates fully customizable, animated cursor effects on your modern web applications.

It replaces or augments the native browser cursor with a fluid, interactive element that responds to user actions. Works with Vanilla JavaScript and React.js.

Features:

• React Support: Includes both a custom hook (useAuraCursor) and a component (<AuraCursor />) for React applications.
• Automatic Element Detection: The cursor automatically identifies interactive elements including links, buttons, elements with click handlers, and elements styled with cursor: pointer.
• Hover State Customization: You can configure colors, opacity values, and scale factors when the cursor hovers over interactive elements.
• Multiple Display Modes: Supports filled circles, outline-only circles with center dots, and an interactive-only mode where the cursor appears exclusively over clickable elements.
• Smart Visibility Management: The cursor automatically hides when the mouse exits the browser window or viewport. It also disables itself on mobile devices and small screens to preserve native touch interactions.
• Performance Optimization: The library uses requestAnimationFrame for smooth animations. All calculations are optimized to minimize layout thrashing and reflows.

See It In Action:

How To Use It:

1. Install and import the Aura Cursor package using your preferred package manager:

# Yarn
$ yarn add aura-cursor

# NPM
$ npm install aura-cursor

# PNPM
$ pnpm install aura-cursor

import { AuraCursor } from 'aura-cursor';

2. For direct browser usage without a build step, reference the UMD bundle as follows:

<!-- Local -->
<script src="/path/to/dist/index.umd.js"></script>

<!-- CDN -->
<script src="https://unpkg.com/aura-cursor/dist/index.umd.js"></script>

3. Create a new custom cursor instance with default settings. The cursor will now follow mouse movements and automatically expand when hovering over interactive elements.

// Initialize cursor with default configuration
const cursor = new AuraCursor({
  // options here
});

// Activate the cursor
cursor.init();

4. Use the useAuraCursor hook in your React apps:

The hook manages the cursor lifecycle. It initializes when the component mounts and cleans up when the component unmounts.

import { useAuraCursor } from 'aura-cursor';
function App() {
  // Hook automatically handles initialization and cleanup
  useAuraCursor({
    // options here
  });
  return <div>Your application content</div>;
}

5. Or use the component syntax:

import { AuraCursor } from 'aura-cursor/react';
function App() {
  return (
    <>
      <AuraCursor
        size={20}
        color="#000000"
        opacity={0.5}
        speed={0.3}
      />
      <div>Your application content</div>
    </>
  );
}

6. All available options to customize the cursor.

const cursor = new AuraCursor({
  /**
   * Circle size in pixels
   * @default 20
   */
  size?: number;
  /**
   * Circle color
   * @default '#000000'
   */
  color?: string;
  /**
   * Circle opacity (0 to 1)
   * @default 0.5
   */
  opacity?: number;
  /**
   * Mouse follow speed (0 to 1)
   * Higher values make the circle follow the mouse faster
   * @default 0.3
   */
  speed?: number;
  /**
   * Whether to hide the default cursor
   * @default false
   */
  hideDefaultCursor?: boolean;
  /**
   * Additional CSS class for the cursor element
   * @default ''
   */
  className?: string;
  /**
   * Whether to apply the cursor only on interactive elements (links, buttons, etc)
   * @default false
   */
  interactiveOnly?: boolean;
  /**
   * Options for hover effects when cursor is over interactive elements (links, buttons, etc)
   * @default undefined (no special styling)
   */
  hoverEffect?: AuraCursorHoverEffectOptions;
  /**
   * Show cursor as outline (border only) with center dot
   * @default false
   */
  outlineMode?: boolean;
  /**
   * Border width in pixels when outline mode is enabled
   * @default 2
   */
  outlineWidth?: number;
  /**
   * Color for the center dot in outline mode or when hideDefaultCursor is enabled
   * If not provided, uses the primary color
   * @default undefined (uses primary color)
   */
  centerDotColor?: string;
  /**
   * Color when hovering over interactive elements
   * If not provided, uses the primary color or hoverEffect color
   * @default undefined (uses primary color or hoverEffect color)
   */
  hoverColor?: string;
  /**
   * Size of the center dot in pixels when hideDefaultCursor is enabled or in outline mode
   * @default 3
   */
  centerDotSize?: number;
  /**
   * Color for the center dot when hovering over interactive elements
   * Works in both outline mode and when hideDefaultCursor is enabled
   * If not provided, uses centerDotColor or the primary color
   * @default undefined (uses centerDotColor or primary color)
   */
  centerDotHoverColor?: string;
});

7. API methods.

• init(): Initializes the cursor instance, creates the DOM elements, and attaches all necessary event listeners.
• destroy(): Completely removes the cursor from the DOM and cleans up all event listeners.
• updateOptions(options): Dynamically updates the cursor configuration without needing to destroy and re-initialize the instance. Accepts a partial options object.

Alternatives:

• 10 Best Custom Cursors Made With jQuery & Vanilla JavaScript

FAQs

Q: How do I prevent the cursor from appearing on specific elements?
A: Add pointer-events: none to elements where you want the default cursor behavior. You can also use the interactiveOnly mode and ensure non-interactive elements do not have click handlers or role=”button” attributes.

Q: Why does the cursor lag behind the mouse pointer?
A: The lag is intentional and controlled by the speed parameter. Lower speed values create more lag for a trailing effect. Set speed to 1.0 for instant following.

Q: Will this affect the performance of my website?
A: The impact is minimal. The library uses requestAnimationFrame for movement and CSS transforms for rendering.

The post Custom Mouse Effects for Modern Web Apps – Aura Cursor appeared first on CSS Script.