Custom-curses NPM

Custom CURSES

Beautiful Cursors

A simple Library to add custom cursors to your Webpage in Javascript. It utilizes the HTMLCanvasElement .

Examples: https://custom-curses.vercel.app/

Preview:

import { Cursor, Pointer, initializeCanvas } from "custom-curses";
const pointer1 = new Pointer({
  pointerShape: ["string", "👆"],
  size: 50,
  drag: 0.1,
  xCharOffset: 18,
  yCharOffset: 85,
  rotation: -40,
  xOffset: 0,
  yOffset: 0,
});

const pointer2 = new Pointer({
  pointerShape: ["string", "༼ つ ◕_◕ ༽つ"],
  size: 20,
  drag: 0.97,
  xOffset: 200,
  yOffset: 100,
});

const cursor1 = new Cursor({
  pointers: [pointer1, pointer2],
  drag: 0, //where 1 is max
  hideMouse: true,
});

let cleanup = initializeCanvas(cursor1); // this function returns a cleanup function that can be used to dispose all the cursors/pointers cleanly

Preview GIF

React

You only need to wrap the initializeCanvas function in a useEffect hook

More example usages in ./examples/ or https://custom-curses.vercel.app/

Features

It accepts Emojis, and any string you can use in the canvas normally and the rotation of said characters.
It now accepts any images that can be used with the HTMLCanvas directly, but animated GIF images will only render the first frame of the GIF.
You can adjust the drag on each individual pointer and for the cursor as a whole.
You can adjust the X and Y offset for each pointer individually and for the cursor as a whole.
The library now works with React (just wrap it in a useEffect)
The library now works with Next (just wrap it in a useEffect, and also wrap import the page using dynamic imports, see: Issue #10)

The way it works

Several Pointer objects can be bound to a cursor Object. You can theoretically pass in an infinite number of Pointers to the cursor.
The cursor object is then drawn to the canvas. For each animation loop it waits for all canvas objects to draw and update before clearing the canvas.
A canvas object is instantiated and bound to the Cursor Object.
The canvas element is only allowed to have 1 Cursor Object, not sure why anyone would want other wise.