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
You only need to wrap the initializeCanvas
function in a useEffect
hook
More example usages in ./examples/
or https://custom-curses.vercel.app/
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)
Using npm:
npm install custom-curses
Provision will be made for a cdn link
Want to contribute? Great! Make an Issue!
Generated using TypeDoc