gra-ui

Component

DriftPin

A pointer-controlled rail snaps the child to one of seven actual grid slots. The position persists after release and the keyboard can move it by slot, even though the cargo has no useful destination.

Possible use

It could let a reviewer park a warning at the point where attention drifted, or let a presenter slide an agenda label toward the person discussing it. Normal layout already has a more honest answer to both requests.

Reasonable alternative

A reasonable local alternative is normal flow, one alignment rule or a real drag-and-drop destination. A seven-slot pin rail preserves a coordinate without preserving a reason.

01 / Preview

Try it yourself.

Preview Interactive
Drift pinslot 4 / 7
Move me slightly to the right

The cargo is parked at a real slot, although the rail has no destination.

Mechanism
1
Grab the cargo rail or focus it for keyboard control.
2
Drag across seven snap slots; the child parks at the exact chosen slot.
3
Center the pin when the arbitrary parking place has been documented.

02 / Usage

Put it somewhere.

example.tsxTSX
import { DriftPin } from "gra-ui";
import "gra-ui/styles.css";

export function ParkedNotice() {
  return <DriftPin><span>Move me slightly to the right</span></DriftPin>;
}

03 / API

Small surface area.

PropTypeDescription
childrenReactNodeThe cargo snapped to the directly manipulated rail position.