Magic Cursor effect library / Ring

Preview a smooth ring cursor that follows pointer movement with configurable size, color, border width, and easing.

ring

Code

import { createEffect } from "magic-cursor-effect";

const root = document.querySelector("#your-root") as HTMLElement;

const instance = createEffect("ring", root, {
  "size": 38,
  "color": "rgba(99, 102, 241, 0.95)",
  "borderWidth": 2,
  "smoothing": 0.22
});

// later
// instance.destroy();