Magic Cursor effect library / Invert ring

Ring cursor that inverts or blends with the background using blend modes, optional blend background, and ring smoothing.

invertRing

Code

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

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

const instance = createEffect("invertRing", root, {
  "size": 42,
  "color": "rgba(99, 102, 241, 0.95)",
  "borderWidth": 2,
  "smoothing": 0.9,
  "blendMode": "difference",
  "blendBackground": "#fff"
});

// later
// instance.destroy();