Component

Counterweight

It gives a user direct control of a five-slot rail, but moves the child according to the exact opposite position. The weight remains where it was dragged and the cargo keeps its mirrored station until recentered.

Possible use

It could let a reviewer position a handoff warning opposite the place where attention is dragged, or let a presenter balance an agenda label against a deliberately chosen counter-position.

Reasonable alternative

A reasonable local alternative is normal flow layout with one alignment value. A mirrored cargo rail creates a surprising coordinate rule where a direct position would have been enough.

01 / Preview

Try it yourself.

Opposite cargo

Mechanism

1: Start with the weight and cargo balanced in the center.
2: Drag the weight across the five-slot rail, or use the arrow keys.
3: The cargo moves to the exact opposite slot and stays there.
4: Recenter the weight when the counter-position has made its point.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function BalancedNotice() {
  return <Counterweight><span>Move the balance</span></Counterweight>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content parked at the slot opposite the directly manipulated weight.