Component

CellularDrift

It places a child on a bounded three-by-three board. Selecting any numbered cell moves the actual content to that coordinate, with the middle treated as a strangely privileged reset point.

Possible use

It could let a reviewer park a warning in the cell where attention seems likely to land, or let a presenter assign an agenda item a coordinate on an unnecessarily tactical slide.

Reasonable alternative

A reasonable local alternative is normal flow or one alignment value. A nine-cell relocation board makes a simple position depend on a small ceremony.

01 / Preview

Try it yourself.

Place me precisely

Mechanism

1: Start with the content in the privileged middle cell.
2: Click any numbered cell or focus it and press Enter.
3: The actual child travels to that coordinate across the board.
4: Return to the middle when the grid has made its point.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function ParkedNotice() {
  return <CellularDrift><span>Place me precisely</span></CellularDrift>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content moved across the nine-cell board.