Skip to content
Pinky UI

overlays

Follow Anchor Surface

A contextual surface tracks a moving source while keeping its relationship readable and bounded.

  • overlays
  • anchor
  • follow
  • spatial
Related pattern

The surface follows source movement; unlike a cursor surface, the source itself moves.

Live preview

Follow anchor

The context stays with its moving source.

Anchor ready

Quick usage

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

<FollowAnchorSurface />

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 anchor stage.

Accessibility

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

Performance

  • Position updates are discrete in the example and can be driven by host geometry.
  • The context is clamped inside its stage to avoid viewport clipping.

Reduced motion

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

When to use

  • Canvas objects, maps and movable sources with local context

When not to use

  • Static forms or simple tooltip copy

Skill

Purpose

Use a follow anchor surface when a source can move and its context must remain spatially attached rather than staying at the original coordinate.

Interaction anatomy

  • The anchor has a bounded position.
  • The context follows its current position and is clamped inside the stage.
  • Keyboard arrow controls provide a touch-safe movement path.

Good for

Canvas objects, maps, spatial editors and movable media sources.

Avoid

Static forms, ordinary help copy or a simple tooltip relationship.

Live example

Move the anchor with the arrow controls and watch its context travel with it.

Usage

tsx
<FollowAnchorSurface />

Tune

Clamp the context, keep a readable gap, define the movement step and switch to an inline relationship when the stage becomes narrow.

Accessibility and reduced motion

Provide labelled movement buttons and a live position summary; do not make drag the only input. Reduced motion removes travel interpolation while the context still follows state.

Open this skill on its own page