AURA (Beta)

Themed cursor shadows for the web.

Still in beta. Works best in Chrome and Chromium-based browsers. Safari support is improving.

Get StartedGitHub

Colors

Customize the shadow color of the cursor.

Hover

Hover over buttons to see the pointer cursor with shadow.

Drag

Drag the item to an empty slot to see grab and grabbing cursors.

Highlight

Select this text to see the I-beam cursor with shadow. The effect is subtle but intentional, adding a layer of polish to your interface.

How It Works

Aura generates custom SVG cursors based on macOS designs with baked-in colored shadows, then applies them via CSS custom properties. No runtime overhead — just static CSS after the initial render.

  • SVG-basedCrisp at any resolution
  • LightweightNo runtime, just CSS
  • ThemeableUpdates instantly when color changes

Installation

npm install cursor-aura
import { Aura } from 'cursor-aura'

<Aura color="#000000" />

Or paste this into Claude Code, Cursor, or any AI coding tool:

Install the cursor-aura npm package and add it to my app.
It replaces the default cursor with a themed SVG cursor that has a colored drop shadow.

npm install cursor-aura

For React: import { Aura } from 'cursor-aura' and render <Aura color="#000000" /> at the root.
For vanilla JS: import { AuraVanilla as Aura } from 'cursor-aura/vanilla' and call Aura.init({ color: '#000000' }).

Docs: https://aura.juangabriel.xyz/getting-started