Skip to content
Pinky UI

overlays

Cursor Action Surface

A compact action surface follows pointer intent across a bounded source area and can be pinned for touch.

  • overlays
  • cursor
  • actions
  • pin
Related pattern

Pointer-following actions with an explicit pin fallback; it is not a decorative cursor effect.

Live preview

surface actions

Pointer follows · tap pins

Quick usage

usage
import { CursorActionSurface } from "@pinky-ui/systems";

<CursorActionSurface />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems 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/systems

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

Props

PropTypeDefaultDescription
classNamestring—Styles the bounded cursor-action stage.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • The surface stays within a bounded stage and only updates its local coordinate.
  • Tap pins the action surface so touch users do not need hover.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Canvas-like source surfaces with nearby lightweight actions

When not to use

  • Essential controls or dense touch-first forms

Skill

Purpose

Use a cursor action surface when a bounded source area benefits from lightweight actions that follow pointer intent and can be pinned for touch.

Interaction anatomy

  • Pointer movement selects a source and positions one action surface.
  • Focus selects the same source for keyboard users.
  • Tap pins the actions so no hover state is required.

Good for

Canvas-like workspaces, visual studies and spatial source areas.

Avoid

Essential controls, dense forms or actions that must be visible at rest.

Live example

Move across Surface, Image and Note; tap to pin the action surface on touch.

Usage

tsx
<CursorActionSurface />

Tune

Keep the action set short, clamp the surface, use a stable reading offset and make the pinned state visually explicit.

Accessibility and reduced motion

Every source needs a focusable button path and visible labels. Touch uses tap-to-pin, not hover simulation. Reduced motion removes the follow animation while keeping source selection and pinning available.

Open this skill on its own page