Component

TetherPull

It keeps a child fixed at the center of a surface while a directly manipulated anchor stretches a real SVG tether toward it. The anchor can be dragged or moved with arrow keys, but the content declines to follow.

Possible use

It could let a reviewer pull a warning toward the place where attention is drifting, or let a presenter stretch an agenda label toward a speaker without moving the label itself.

Reasonable alternative

A reasonable local alternative is one pointer position or normal flow. A tether adds geometry to communicate a relationship that the page could simply state.

01 / Preview

Try it yourself.

Stay exactly here

Mechanism

1: Drag the anchor dot around the surface.
2: Use arrow keys when the dot is focused.
3: Watch the tether stretch while the notice refuses to move.

02 / Usage

Put it somewhere.

example.tsxTSX

import { TetherPull } from "gra-ui";
import "gra-ui/styles.css";

export function StubbornNotice() {
  return <TetherPull><span>Stay exactly here</span></TetherPull>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content fixed at the center while its tether anchor moves.