Component

MomentumWeave

It gives a row of children a shuttle and asks the pointer to supply the momentum. A gentle release settles the pieces into two strands; a quick flick uses three, and the resulting order stays changed until it is restored.

Possible use

It could be used to let a reviewer physically weave the fields of a handoff card according to how urgently they drag, or to make a presenter recompose four agenda labels into a tighter grid after a quick flick.

Reasonable alternative

A reasonable local alternative is an array with one explicit reorder and a CSS grid. Publishing a momentum-sensitive shuttle is difficult to defend because the children already had a perfectly serviceable order.

01 / Preview

Try it yourself.

Title

Status

Owner

Date

Drag slowly for two strands or flick quickly for three. The order really changes.

Mechanism

1: Start with four ordinary fields in their supplied order.
2: Drag the shuttle across the rail, or focus it and press an arrow key.
3: Release gently to weave two strands; flick quickly to weave three.
4: Restore the order when the shuttle has rearranged enough paperwork.

02 / Usage

Put it somewhere.

example.tsxTSX

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

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

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content interleaved into two or three strands by the drag momentum.