Component
AlphabetTreadmill
It advances every alphabetic character in a label by one place per activation, changing the content itself until twelve unnecessary turns have been completed.
Possible use
It could be used to make a reviewer escalate a status label through twelve editorial revisions before a handoff, or to let a presenter ceremonially age a small heading one letter at a time.
Reasonable alternative
A reasonable local alternative is the original string plus one small character-mapping function, or no transformation at all. Publishing an alphabet treadmill is difficult to defend because a label does not need to earn its final spelling.
01 / Preview
Try it yourself.
Each turn advances every letter by one place, for no editorial reason.
Advance the label one letter at a time. The spelling really changes.
- 1
- Start with an ordinary status label.
- 2
- Advance one letter; every alphabetic character moves forward together.
- 3
- Repeat until twelve turns have changed the actual text.
- 4
- Restore the original when the label has walked far enough.
02 / Usage
Put it somewhere.
import { AlphabetTreadmill } from "gra-ui";
import "gra-ui/styles.css";
export function EscalatedLabel() {
return <AlphabetTreadmill label="Ready for review" />;
}03 / API
Small surface area.
labelstringThe text whose alphabetic characters move one place per turn.