magic-cursor-wandChalk, glitter and cloud effects for the pointer

A small browser library. Add effects, plugins and configuration providers without changes to the core.

Get started

See the demo

A chalk line with glitter that follows a pointer

Three effects

The cloud, chalk and glitter effects follow the pointer. Each effect has a schema with safe limits.

Configuration from providers

Get the settings from localStorage, an HTTP endpoint or a server event stream. Autosave is always on.

Strict CSP

The library sets styles with element.style only. It makes no network requests for images.

Reduced motion

The wand obeys the prefers-reduced-motion media query. The site owner can also stop all motion.

What the library does

The library shows chalk, glitter and cloud effects that follow the pointer. A fixed canvas covers the viewport, and the page below the canvas continues to receive clicks.

The core has no dependencies. The settings panel uses Tweakpane, and the hook for React uses React. Both are optional.

Where to start

To add the effects to a page, read Get started.
To learn how the parts operate together, read the concepts.
To do one specified task, read a how-to page.
To find the name and type of an option, read the reference.