Halo Cursor – Live Demo

Live playground

Hover buttons, links and inputs inside this card to see the halo cursor in action.

Cursor enabled

Buttons

Hover & click to see hover and click states.

:hover state Click pulse

Links

Test anchor hover state and accessibility.

View on npm

Framework agnostic

Inputs

Try focus and hover around interactive controls.

Your email

Cursor options

Adjust options and see changes instantly in the playground.

Sizes

Outer size Inner size Hover outer size Click outer size

Colors & behavior

Inner color Hover color Outer border Hover border

Hide native cursor Disable when prefers‑reduced‑motion is set Lerp (smoothing) Interactive selectors

Scope & layering

z-index Scope cursor to playground card only

When scoped, the cursor is only active inside the playground card and hides when the pointer leaves it.

Usage snippet

app.ts

import { Cursor } from '@andreasnicolaou/halo-cursor';

const cursor = new Cursor(// see options on the right);
cursor.mount();

// optional
// cursor.pause();
// cursor.resume();
// cursor.destroy();

The cursor automatically disables itself on coarse pointers and when users enable prefers-reduced-motion: reduce.

Halo Cursor – Framework‑Agnostic Animated Cursor

Live playground

Cursor options