Skip to content
Pinky UI

cursor

Magnetic Cursor Target

Composition of Magnetic and CursorTarget.

  • cursor

Quick usage

usage
import { MagneticCursorTarget } from "@pinky-ui/effects";

<MagneticCursorTarget />

Install

Add @pinky-ui/effects as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/effects

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Motion never carries the only meaning; the underlying content remains in the DOM.
  • Pair pointer effects with an equivalent focus or keyboard state where the target is interactive.

Reduced motion

The effect resolves to a static readable state when motion is reduced.

When to use

  • As a restrained enhancement to meaningful content.

When not to use

  • When the content or control would be unclear without motion.

Skill

What it does

Magnetic Cursor Target composes one proximity field with one semantic cursor target. It can pull the target, claim a cursor label, or do both without inventing a second attraction algorithm.

Interaction anatomy

  • Trigger: a meaningful link, button or compact action region.
  • State: idle, nearby, hovered, focused and disabled.
  • Motion: short spring translation with a hard travel cap.
  • Surface: the target remains the visible control; cursor claims are contextual.
  • Feedback: focus and the cursor label describe the same action.

Good for

  • One primary CTA with space around it.
  • A project card or compact action cluster.
  • An intentional cursor vocabulary on a portfolio surface.

Avoid for

  • Large lists, text inputs, disabled controls or exact-position UI.
  • A page where every control competes for the cursor.
  • Replacing a visible label or focus style with a cursor-only cue.

Live example

Approach the live target above, then focus it with Tab. Fine pointers get a small pull; touch and keyboard keep a normal actionable control.

Usage

tsx
<CursorProvider>
  <MagneticCursorTarget label="Open" influence="both">
    <a href="/work/project">Open project</a>
  </MagneticCursorTarget>
</CursorProvider>

Tune

  • Keep maxOffset around 4–8px so the target stays anchored.
  • Keep range short; a nearby relationship is more legible than a page-wide field.
  • Use influence="cursor" when the target must stay geometrically exact.
  • Use a short, action-based label such as Open or View.

Accessibility

  • The wrapper never replaces the native link or button.
  • Cursor claims also occur on focus so keyboard users receive equivalent state.
  • Keep a visible focus style and a usable touch target.
  • Coarse pointers and disabled states must remain calm and functional.

Reduced motion

Reduced motion disables translation and cursor scaling while preserving the native action, focus state and any semantic label.

Open this skill on its own page