Cursor & Pointer
Color Wake
Six grey pictures bloom into muted colour along a soft wake that follows a finger or pointer, then fade.
svgmedium complexitymoderate motionpointer+keyboardmobile-readyaccessible
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
1
When to use it
Landing grids where visitors should play before reading.
When not to
Colour that must be visible at rest.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Matte paper register (clay, sand, sage, slate, dusty blue). Edit --cw-* tokens; ART holds [label, svg]; drop() sets bloom size.
Safe to edit
- --cw-* tokens
- ART pictures
- bloom size and fade
Keep intact
- IIFE + prefix, reduced-motion, visibilitychange, theme hook, demo-v1
Known limitations
- Demo state resets on remount
More Cursor & Pointer components
- Magnetic DotGlowing pink dot springs to the pointer; a laggy outer ring squashes along its travel, joined by a fading tendril. Self-demos via Lissajous path until…
- Gooey Trail22 pink blobs chain-follow the pointer via spring physics and merge into liquid goo through an SVG feColorMatrix filter; auto-demos a Lissajous path until…
- Spotlight MaskRadial spotlight follows the pointer, punching through a dark veil to reveal a pink dot grid and glowing word. Auto-demos via Lissajous path until first…
- Elastic RingGlowing pink ring trails the pointer with damped-spring physics, stretching along velocity and squashing across it. Auto-demos on a Lissajous path until…
- Trail CometHot-pink comet spring-follows the cursor, dragging a tapering additive trail that lengthens with speed and flings spark particles. Lissajous demo stops at…
- Ripple FieldGrid of dots ripples outward in expanding pink rings as the pointer moves; dots displace radially along each wavefront. Lissajous auto-demo until first…