@supermousejs/stick

A Logic Plugin that calculates the bounding box of hovered elements. Used in combination with @supermousejs/ring (or SmartRing) to create a morphing effect.

Installation

pnpm add @supermousejs/stick

Usage

import { Supermouse } from "@supermousejs/core";
import { Stick } from "@supermousejs/stick";
import { Ring } from "@supermousejs/ring";

const app = new Supermouse();

app.use(Stick({ padding: 10 }));
app.use(Ring()); // Ring automatically detects 'stick' state and morphs

HTML:

<button data-supermouse-stick="true">Sticky Element</button>

Documentation

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