Component

SwipeShunt

Swipe the surface left or right, or focus it and use the arrow keys. Each gesture actually rotates the words by one place; Restore order returns the supplied label.

Possible use

It could let a reviewer swipe a handoff sentence until its topic lands at the front, or let a presenter move an agenda word to the end for theatrical emphasis. The sentence changes positionally without gaining meaning.

Reasonable alternative

A reasonable local alternative is writing the intended word order directly or using one deliberate reorder action. A sentence should not require a tiny conveyor belt.

01 / Preview

Try it yourself.

Current word order

Reviewtheordinaryhandoff

Swipe left or right · Arrow keys also count

Mechanism

1: Start with four words in their supplied order.
2: Swipe left or right across the surface.
3: The first or last word actually moves to the other end.
4: Use arrow keys or restore the original order.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function ShuntedLabel() {
  return <SwipeShunt label="Review the ordinary handoff" />;
}

03 / API

Small surface area.

PropTypeDescription

labelstringThe whitespace-separated words moved by each horizontal shunt.