Component

ChildGravity

It turns children into a gravity experiment: click one fragment to make it the anchor, then moves every sibling away by a gap calculated from the total child count.

Possible use

It could be used to let a reviewer nominate one field as the center of a card and ceremonially push every other field away, or to make a presenter create space around the label they are discussing.

Reasonable alternative

A reasonable local alternative is a selected index and one conditional transform in the page. Publishing a child-count gravity calculation is difficult to defend when ordinary spacing is already enough.

01 / Preview

Try it yourself.

Click one child. Its siblings will retreat by a calculated distance.

Click one field. Its siblings retreat by the same calculated gap.

Mechanism

1: Click the child you want to make the temporary anchor.
2: The gap is calculated from the number of children.
3: Every sibling moves away according to its ordinal distance.
4: Release gravity to return every child to its starting position.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function SeparatedFields() {
  return (
    <ChildGravity>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
      <span>Date</span>
    </ChildGravity>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe fragments that move away from the clicked anchor.