Component

CenterOut

It transforms the actual character order of a label: the middle character appears first, then its neighbors alternate outward. Straighten the sentence restores the supplied order without changing the content.

Possible use

It could let a reviewer inspect the center of a handoff sentence before its edges, or let a presenter make one agenda phrase radiate outward during a deliberately theatrical explanation.

Reasonable alternative

A reasonable local alternative is the original label with ordinary text selection or a deliberate typographic emphasis. A center-first reading order makes a sentence less readable without revealing anything useful.

01 / Preview

Try it yourself.

Ready for another review

Mechanism

1: Start with the supplied sentence in its ordinary order.
2: Press Read from the middle to reorder the actual characters.
3: The center appears first, then its neighbors alternate outward.
4: Straighten the sentence when center-first reading has done enough damage.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function UnusualReading() {
  return <CenterOut label="Ready for another review" />;
}

03 / API

Small surface area.

PropTypeDescription

labelstringThe text whose actual characters are reordered from the center outward.