Interactive Cursor Design
Also called: Custom cursor UI, Magnetic cursor, Blend-mode cursor
The pointer becomes the star: an inverting cursor blob that grows and labels what it touches, magnetic buttons and spotlight reveals.
Design keywords
Say these words to ask for this style.
Interactive Cursor Design replaces the arrow with a large blend-mode blob that inverts whatever it passes over, trails the pointer with a soft lag, and swells into a labelled disc (“View”, “Drag”, “Play”) over interactive things. Buttons are magnetic — they lean toward the pointer before you click — and cards light up with a spotlight that follows the mouse. The page around it is a quiet gallery: warm bone background, black ink, an ultramarine accent, oversized wide display type and thin black rules, so the cursor has a stage. On touch screens the same language becomes tap spotlights.
Best for
- Design studios, agencies and portfolios
- Fashion, art and music campaign sites
- Product reveal and launch microsites
- Award-style showcases where exploration is the point
Avoid for
- Forms-heavy apps and checkouts
- Accessibility-critical or older audiences
- Touch-only products (the effect disappears)
✓ Do
- Keep the native cursor available for text fields and when JS fails
- Ease the blob with lerp 0.15–0.25; shrink it to ~0.55 over links and grow it to ~1.25 with a label over cards and media
- Give every hover reveal a keyboard focus equivalent
✕ Don't
- Don’t hide where the click lands — keep a small precise dot inside the blob
- Don’t make magnetic pull larger than ~10px
- Don’t run the cursor on touch devices
Not to be confused with
On mobile
There is no cursor on touch: translate the blob into a tap spotlight (an inverting circle that blooms where the finger lands) and keep magnetic and hover reveals as pressed states. Never hide content behind hover.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.