Component

Braidline

It transforms the supplied text by distributing alternating characters into two visible strands. The characters remain real content in a different arrangement and can be returned to the straight line without losing anything.

Possible use

It could let a reviewer braid a handoff phrase while discussing which characters deserve attention, or let a presenter turn one agenda line into a two-strand visual aside.

Reasonable alternative

A reasonable local alternative is the original label with a deliberate typographic treatment. A reusable character loom is not a meaningful content abstraction.

01 / Preview

Try it yourself.

Ready for review

Mechanism

1: Start with one straight label.
2: Click Braid the characters to distribute alternating characters into two strands.
3: The actual characters remain present, but their reading order becomes visibly interlaced.
4: Unbraid the line when the typographic loom has done enough.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function InterlacedStatus() {
  return <Braidline label="Ready for review" />;
}

03 / API

Small surface area.

PropTypeDescription

labelstringThe text split into alternating character strands.