It follows
the cursor.
A pocket eclipse: a dark disc with a solid rim and a dithered corona that trails the pointer and breathes. Leave it alone and it wanders on a slow Lissajous path. Sparks fall from the rim into the disc.
Overview
A WebGL2 dither field driven by dither.js. The stencil is the crescent at pocket size: a disc whose centre lives in a custom uniform, moved each frame by the stencil's frame hook, which eases toward the pointer while it is over the hero and toward a Lissajous curve when it is not. The engine tracks the pointer in canvas pixels; the stencil only decides what to do with it.
When to use
Heroes that want one interactive moment without a mouse-trail or a cursor replacement. Touch devices never see the pointer, so the idle path is the real design, tune it first.
Spec
- Palette
- rim #fbcfe8 · mid #ec4899 · far #4a1030 · spark #fff1f7 on #050505
- Disc
- radius 12% of the short side, breathes ±6%, 4px solid rim, corona at 55% length
- Motion
- eases 5%/frame toward the target, idle Lissajous 0.0071/0.0093 rad/f
- A11y
- aria-hidden canvas, copy ignores the pointer, reduced-motion = one still frame
- Perf
- WebGL2, 2.2 MP pixel budget, pauses offscreen
Anti-patterns
Do not snap to the pointer; the ease is what makes it feel heavy. Do not grow the disc past 15% of the short side, it starts covering the copy. Keep the copy pointer-events: none so the hero gets every move.