Component

WordLadder

Advance through a real word morph: each rung replaces the next character from the supplied start with the corresponding character from the target. The displayed wording changes at every step and Return to start restores the opening label.

Possible use

It could let a reviewer migrate a handoff status from draft language to approved language one character at a time, or let a presenter turn one agenda label into another through a tiny typographic ceremony. Neither use benefits from delaying a text replacement.

Reasonable alternative

A reasonable local alternative is rendering the target wording when it is ready and keeping the source in the data model. A character ladder turns a direct update into a progress track.

01 / Preview

Try it yourself.

A label is changing its mind by positioncoldEach rung replaces one real character.

1234

Mechanism

1: Begin with “cold” and a target of “warm”.
2: Advance one rung to replace one actual character.
3: Watch the wording morph instead of merely revealing itself.
4: Return to start when the target has earned its unnecessary arrival.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function RenovatedLabel() {
  return <WordLadder start="cold" target="warm" />;
}

03 / API

Small surface area.

PropTypeDescription

startstringThe readable wording shown before the ladder begins.

targetstringThe wording reached by replacing one character position per rung.