Component

PointerPlot

It puts one child on a bounded plotting surface. Pointer placement moves the actual child and crosshair to the chosen coordinate, while arrow keys provide a precise keyboard route back to the middle.

Possible use

It could let a reviewer park a warning at the place where attention drifted, or let a presenter position an agenda label on a tactical-looking slide. Both uses make ordinary layout answer to a coordinate ritual.

Reasonable alternative

A reasonable local alternative is normal flow with one alignment or a local CSS position. A plotting surface introduces geometry when the content could simply occupy its intended place.

01 / Preview

Try it yourself.

Park this note

Mechanism

1: Click anywhere on the plotting surface.
2: Watch the cargo and crosshair move to the real coordinate.
3: Use arrow keys for needless precision, or recenter it.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function PlottedNotice() {
  return <PointerPlot><span>Park this note</span></PointerPlot>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe cargo moved to a real coordinate on the plot.