Cursor trails

One script, four trails: character cells that burn in and decay, media flung out by pointer velocity, a block-built mark that fills to a full square over targets, and a coordinate readout whose dashed rect snaps around elements. Pick a trail and tune it in the panel.

ascii

Cells invert over media

Character cells spawn inside a radius around the pointer and fade out over a few frames. Over images, video or anything marked data-trail-invert the cells flip to an inverted palette so the trail stays readable on light artwork.

images

Velocity fling

The trail counts how far the pointer has travelled; every spawnDistance pixels it drops one piece of media and throws it along the pointer's instantaneous velocity. Flick fast and the pieces sail; drift slowly and they stack up under the pointer. The demo media is painted on canvas at load — no image files.

blocks

Mark that fills

The pointer is replaced by a mark built from blocks on a small grid — dot, cross, square, ring, or your own pattern. Over a data-cursor-fill target the remaining blocks arrive one by one, in the chosen reveal order, until the mark is a solid square.

hover here — the mark fills to a full square
readout

Snapping rect

A crosshair with live X/Y labels. Over a data-cursor-snap element the rect grows around it with marching-ants dashes and the labels switch to the element's data-cursor-title. It stays glued while the page scrolls.

Card oneRect snaps to these bounds.
Card twoLabels swap to the title.
Card threeNo title — coordinates stay.
readout · colour

Colour flips per section

This block carries data-cursor-color, so the readout turns dark while the pointer is inside it and returns to the accent colour on the way out.

Light cardDark rect, same snapping.
Light cardMarching ants keep running.