Component

EdgeExchange

Exchange edges to rotate each word’s outside characters while preserving its middle. The rendered label changes into a deterministic, reversible near-sentence; restoring it returns the exact original wording.

Possible use

It could let a reviewer scramble the edges of a handoff line to test whether its middle remains recognizable, or let a presenter create a temporary editorial artifact from an agenda phrase. Neither use makes the copy clearer.

Reasonable alternative

A reasonable local alternative is keeping the label intact and applying a one-off string transform only for an actual text experiment. A reusable edge exchange should not supervise ordinary wording.

01 / Preview

Try it yourself.

Preview Interactive
Edge exchangeOriginal order
Displayed label

Keep the handoff readable

Trade the two edges of every word in one sweeping editorial decision.

Mechanism
1
Start with a phrase whose word edges are behaving normally.
2
Exchange the first and last character of every word in one operation.
3
Restore the exact wording when the transformed sentence stops helping.

02 / Usage

Put it somewhere.

example.tsxTSX
import { EdgeExchange } from "gra-ui";
import "gra-ui/styles.css";

export function ExchangedNotice() {
  return <EdgeExchange label="Keep the handoff readable" />;
}

03 / API

Small surface area.

PropTypeDescription
labelstringThe phrase whose word edges are exchanged.