Component

BeltCollector

The collector follows the pointer or arrow keys along a belt. As it reaches each piece, that child leaves the belt and appears in a real pickup tray, so movement changes the inventory rather than merely animating a cursor.

Possible use

It could let a reviewer sweep a handoff brief into a pickup tray one field at a time, or let a presenter physically collect agenda items before a slide advances. A list already has a much better collection mechanism.

Reasonable alternative

A reasonable local alternative is an ordinary list with selection state or one batch action. A pointer-controlled collector spends a machine metaphor on moving data a few pixels.

01 / Preview

Try it yourself.

Title

Status

Owner

Pickup tray

Nothing has been captured yet.

Mechanism

1: Drag the pickup head across the belt.
2: Every reached child leaves the belt for the real tray.
3: Use arrow keys or reset the belt to send the pieces back.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function CollectedNotice() {
  return (
    <BeltCollector>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
    </BeltCollector>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe pieces picked up from the belt and placed in the tray.