Chase

Magic Cursor effect library / Magnifier

Magnify content under the cursor with zoom, blur, brightness, and saturation controls plus the same ring smoothing as the ring effect.

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

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

const instance = createEffect("magnifier", root, {
  "size": 52,
  "color": "rgba(99, 102, 241, 0.95)",
  "borderWidth": 2,
  "smoothing": 0.1,
  "zoom": 1.6,
  "lensBlurPx": 6,
  "lensBrightness": 1.15,
  "lensSaturate": 1.25,
  "lensFillOpacity": 0.06
});

// later
// instance.destroy();