Getting Started

Aura adds themed drop shadows to your cursor. The shadow color updates automatically when your theme changes.

Installation

npm install cursor-aura

React

Add the component anywhere in your app:

import { Aura } from 'cursor-aura'

export default function App() {
  return (
    <>
      <Aura color="var(--your-theme-color)" />
      {/* rest of your app */}
    </>
  )
}

Vanilla JS

For non-React sites:

<script type="module">
  import { AuraVanilla as Aura } from 'https://esm.sh/cursor-aura/vanilla'

  Aura.init({ color: '#0C3EFF' })

  // Update color later
  // Aura.setColor('#FF6183')

  // Clean up
  // Aura.destroy()
</script>

Props

PropTypeDefaultDescription
colorstring#000Shadow color (hex, rgb, or CSS variable)

Accessibility

Aura automatically respects user preferences:

  • Reduced motion: Disabled when prefers-reduced-motion: reduce is set
  • Touch devices: Gracefully skipped (no cursor to shadow)