Overview

Animated Cursor is a lightweight, zero-dependency JavaScript library that replaces the browser's default cursor with a fully customisable animated one. It is project #001 in the 100 Web Projects series by Gayatri Ghogare.

No build step required — just drop two files into your project and you're ready.

Features at a glance:

🖱️

4 Cursor Designs

Glowing Orb, Neon Ring, Crystal Diamond, Crosshair.

🎨

4 Themes

Galaxy, Aurora, Neon, Firefly — swap with one attribute.

☀️

Light / Dark Mode

Toggle with a single class; remembers your preference.

⚡

Zero Dependencies

Pure vanilla JS — no npm, no bundler needed.

Installation

Option A — Direct Download

Download animated-cursor.css and animated-cursor.js from the GitHub repository and place them in your project folder.

Option B — CDN (coming soon)

HTML 
<!-- Stylesheet -->
<link rel="stylesheet" href="https://cdn.example.com/animated-cursor@1.0/animated-cursor.css">

<!-- Script (before </body>) -->
<script src="https://cdn.example.com/animated-cursor@1.0/animated-cursor.js"></script>

Quick Start

Add the required elements to your HTML and load the scripts. The cursor initialises automatically.

index.html — minimal setup 
<head>
  <link rel="stylesheet" href="animated-cursor.css">
</head>
<body data-cursor="orb" data-theme="galaxy">

  <!-- Required elements -->
  <div class="background"></div>
  <div class="galaxy-glow"></div>
  <canvas id="stars"></canvas>
  <div class="glass-overlay"></div>
  <div class="cursor"></div>

  <!-- Your content here -->

  <script src="animated-cursor.js"></script>
</body>
Add the class magnetic-control to any interactive element to trigger the hover-expand effect on the cursor.

Cursor Designs

Set the data-cursor attribute on <body> to choose a design.

🔵

Glowing Orb

Soft glowing ball with sparkle halo.

data-cursor="orb"
⭕

Neon Ring

Hollow ring with neon border glow.

data-cursor="ring"
💎

Crystal Diamond

Rotated square gem with gradient fill.

data-cursor="diamond"
➕

Crosshair

Precision crosshair for gaming UIs.

data-cursor="crosshair"

Themes

Set the data-theme attribute on <body> to switch the colour palette.

🌌

Galaxy

Deep purple and cyan — the default cosmic theme.

data-theme="galaxy"
🌿

Aurora

Teal and emerald greens inspired by the Northern Lights.

data-theme="aurora"
🌸

Neon

Hot pink, electric cyan — cyberpunk vibes.

data-theme="neon"
🦟

Firefly

Warm chartreuse and lime greens on deep forest.

data-theme="firefly"

API Reference

HTML Attributes

Attributes
Attribute Element Values Description
data-cursor <body> orb | ring | diamond | crosshair Sets the cursor visual design.
data-theme <body> galaxy | aurora | neon | firefly Sets the overall colour palette.
class="magnetic-control" Any element CSS class Triggers the cursor hover-expand state.
class="light-theme" <body> CSS class Switches to the light colour mode.

CSS Custom Properties

CSS Variables 
/* Override in your own stylesheet */
:root {
  --accent:         #ffd84a;   /* primary glow colour */
  --accent-rgb:     255, 216, 74;
  --accent-two:     #57d8ff;   /* secondary colour    */
  --accent-three:   #ff7ad9;   /* tertiary colour     */
  --page-bg:        #05070d;   /* page background     */
  --glow-rgb:       138, 43, 226; /* galaxy glow tint    */
}

Browser Support

Animated Cursor uses modern CSS features. The following table shows support status:

Compatibility
BrowserMinimum VersionStatus
Chrome / Edge90+✅ Fully supported
Firefox88+✅ Fully supported
Safari14.1+✅ Fully supported
Opera76+✅ Fully supported
IE 11—❌ Not supported
On touch devices the custom cursor is automatically hidden and the native cursor is restored.

Changelog

v1.1.0

June 2026

Added Projects, Docs, and Contact pages. Fixed footer quick-link hrefs. Added light-theme support to new pages.

v1.0.0

June 2026

Initial release. Animated cursor with 4 designs, 4 themes, star canvas background, light/dark toggle, and cursor gallery page.