@supermousejs/image

Displays a floating image thumbnail next to the cursor on hover.

Installation

pnpm add @supermousejs/image

Usage

import { Supermouse } from "@supermousejs/core";
import { Image } from "@supermousejs/image";

const app = new Supermouse();

app.use(
  Image({
    offset: [30, 30],
    smoothness: 0.1 // Lag factor for the image
  })
);

HTML:

<a href="#" data-supermouse-img="/path/to/image.jpg">Hover to see preview</a>

Documentation

Full documentation and interactive playground available at supermouse or check out the repo.