Component

ScaleSweep

It turns a row of children into a size-earning track: drag the handle across each item, and every item it crosses remains visibly enlarged until you shrink everything again.

Possible use

It could be used to make a reviewer sweep across the fields that deserve extra space on a summary card, or to let a presenter ceremonially enlarge the labels they plan to discuss.

Reasonable alternative

A reasonable local alternative is a small visited-index set and one conditional class in the page. Publishing a drag-operated sizing ritual is difficult to defend when the layout already knows its own priorities.

01 / Preview

Try it yourself.

Title

Status

Owner

Date

Drag the handle across every field. Each one stays larger after the sweep passes.

Mechanism

1: Grab the handle or focus the track with the keyboard.
2: Drag across a field; the handle records every field it crosses.
3: Visited fields remain visibly enlarged instead of returning to normal.
4: Sweep the whole row, then shrink everything when the ceremony is complete.

02 / Usage

Put it somewhere.

example.tsxTSX

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

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

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe items enlarged and marked as the sweep passes over them.