kimochii-pointer

A smooth and variable mouse pointer for JavaScript.


Demo

Used in my website.

https://akutagawa.dev/

Supported platforms

Tested on the latest version of major browsers (Chrome, Safari, Firefox).

Installation

Install this package:

``sh
npm install --save kimochii-pointer


yarn add kimochii-pointer


`

Install GSAP for smooth animation:

`sh
npm install --save gsap@3.x


yarn add gsap@3.x


`

General usage

Initialize in your entry point:

`typescript
import { KimochiiPointer } from "kimochii-pointer";

const pointer = new KimochiiPointer();

pointer.mount(); // Pointer will be shown to the display.
`

Set a shape name to custom attribute data-kimochii-pointer of HTML element you want to change the shape of pointer.

e.g.:

`html
BUTTON
`

The pointer will be stuck to the element when you move over the one.

If you want to hide the default mouse cursor of the operation system, add the below style to your global CSS:

`css
* {
cursor: none !important;
}
`

Preinstalled shapes

There are preinstalled shapes that you can use without any steps.

$3

The pointer expands its scale.

`html



`

$3

The pointer sticks to the element.

`html



`

$3

The pointer stretches vertically like a text cursor.

`html



`

$3

The pointer hides its shape.

`html



`

$3

The pointer decreases its opacity.

`html



`

Create a custom shape

Below is an example of a custom shape that changes pointer color to pink (TypeScript).

`typescript
import { Shape } from "kimochii-pointer";

// Create a custom shape.
class PinkShape implements Shape {
name: Shape["name"] = "pink";

private _pointer: Pointer;

private _backup: Required>;

constructor(pointer: Pointer) {
this._pointer = pointer;
this._backup = {
// Backup default pointer color to restore.
backgroundColor: this._pointer.getProperty("backgroundColor"),
};
}

transform: Shape["transform"] = () => {
this._pointer.apply({ backgroundColor: "hotpink", overwrite: true });
};

restore: Shape["restore"] = () => {
this._pointer.apply({ ...this._backup, overwrite: true });
};
}
`

Register to the pointer:

`typescript
import { KimochiiPointer } from "kimochii-pointer";

const pointer = new KimochiiPointer();
pointer.mount();

pointer.register(new PinkShape(pointer));
`

Use from HTML element.

`html



`

Contribution

$3

`sh
git clone https://github.com/aku11i/kimochii-pointer.git
cd kimochii-pointer

yarn install
`

$3

`sh
yarn dev
`

The demo page (http://localhost:3000/demo.html) will be opened automatically.

Then you can start development by editing demo.html, demo.ts, src/.

$3

`sh
yarn test
``