How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Dot: 4px, red (#D71212), follows the pointer with zero lag, never blends.
- Hexagon: 36px outline that trails the pointer on a spring (stiffness 220, damping 26, mass 0.6). Uses mix-blend-mode: difference, so it inverts over any background.
- Over links/buttons: the hexagon scales to 1.5×.
- data-cursor="snap": the hexagon's target jumps to the element's center and it morphs into a rectangle the size of the element + 10px, with the element's border-radius + 5px (spring stiffness 380, damping 26). Leaving morphs it back.
- data-cursor="View" (any text): the hexagon becomes a light pill reading [ View ], offset down-right from the pointer.
- The cursor re-checks what's under the pointer while the page scrolls, so it stays right when content moves underneath a still mouse.
- Only on devices with a fine pointer that can hover. Touch devices and prefers-reduced-motion keep the normal cursor.