Skip to content
Pinky UI

cursor

Cursor Text

A contextual label for a meaningful target.

  • cursor

Quick usage

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

<CursorText />

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

Purpose

CursorProvider, CursorTarget and CursorText let meaningful regions expose a short contextual label such as “View”, “Open” or “Drag”. The label should repeat an existing action, never introduce the only explanation.

Wrap a project list or drag surface in one provider and give each focusable region a concise target label. Use it for a few high-value regions, not ordinary navigation, forms or every card. Keep the follower small enough to leave the target readable.

The label is decorative (aria-hidden); focus and native accessible names carry the real message. CursorTarget claims on focus as well as pointer entry and cleans up on blur/unmount. The layer disappears for touch and reduced motion, with no loss of functionality.

Open this skill on its own page