Pixel UI/Motion/Cursor trail

Cursor trail

A pixel comet, or a soft glow, that follows the pointer across the page.

<piix-cursor>WebGL

Move your pointer anywhere on the page.

<piix-cursor></piix-cursor>

Kind

Palette

Size1

One tag anywhere on the page. trail leaves a comet of dithered pixels that fade as they fall away; glow is a soft pixel halo. It never gets in the way of clicks and rests the GPU when the pointer is still. It is running on this page right now: move your pointer.

Installation

<!-- once, anywhere on the page: every component -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>

<!-- just cursor trail (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/cursor.min.js"></script>

npm install piixpal

// once, in your entry file
import "piixpal";

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-cursor></piix-cursor>
  );
}

Usage

<piix-cursor></piix-cursor>

API reference

Attribute	What it does	Default
`kind`	`trail` `glow`	`trail`
`palette`	the colours: `lime` `aurora` `sunset` `ocean` `candy` `violet` `fire` `gameboy` `paper` `mono`, or your own, dark to light: `"#000,#6b4cff,#fff"`	`lime`
`size`	how big, 0.5 to 3	`1`
`pixel`	size of one pixel, in px	`4`

Accessibility

Decoration: hidden from screen readers and never catches clicks.
Off on touch screens and with reduced motion.