Cursor / pointer · 2.3
Blend-mode invert cursor
A hole punched in the page, showing the negative of itself.
A white circle following the pointer that inverts whatever is beneath it.
4 knobs
How it actually works
The best trick in the cursor category is that there is no trick. There is no canvas, no filter, no sampling of what is underneath. The compositor was always going to composite this pixel; difference just tells it to subtract instead of paint over.
A position: fixed white div, border-radius: 50%, pointer-events: none, mix-blend-mode: difference. JavaScript only writes the mouse X and Y into two CSS custom properties. The invert itself is pure compositing: foreground minus background, per channel. It reads as expensive and costs nothing.
The knobs, named
Circle size, blend mode, follower lag, circle colour. The blend-mode dropdown is a one-control lesson in compositing: difference, exclusion, and the two that prove the gotchas.
| Knob | Source | What it teaches |
|---|---|---|
| Circle size | ours | Diameter. Large enough and it stops being a cursor and becomes a lens. |
| Blend mode | ours | difference = |fg - bg| per channel. With a WHITE circle, exclusion is mathematically identical to it (both reduce to 1 - bg), so switch the colour to mid grey to tell them apart. normal is here so you can watch it do nothing. |
| Follower lag | ours | Reuses 2.1's lerp. At 1 it is welded to the pointer; lower and the hole trails. |
| Circle colour | ours | Black is the gotcha, shipped as a knob: x - 0 = x, so a black circle produces no effect at all. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
INFERRED
CodePen "Custom cursor with mix-blend-mode" (Lomzo/qBBROLm) plus a dev.to walkthrough. The mechanism is standard and the two gotchas are sourced; we did not fetch a canonical author writeup. Not upgraded.
- Seen on
- CodePen Lomzo/qBBROLm.
- Dependencies
- vanilla: CSS does the work
- Difficulty
- trivial
- Performance
- mix-blend-mode forces a stacking context and can cost compositing on very large pages.
- Accessibility and the floor
- Needs pointer-events: none or it eats every click. Hidden on coarse pointers and under reduced motion.
Notes
Composability. Set lag below 1 and this is 2.1 with a different paint. The two are one mechanism wearing different clothes.