Component
WordTurnstile
It makes a sentence pass through a tiny word-by-word turnstile. Each activation rotates the next word by 180 degrees and keeps the transformation in place until the whole label has paid its unnecessary inversion fee.
Possible use
It could be used to make a reviewer invert each word of a handoff status before a meeting, or to let a presenter ceremonially turn an agenda line upside down as each topic is discussed.
Reasonable alternative
A reasonable local alternative is the original label with one ordinary class. Publishing a word turnstile is difficult to defend because a sentence does not become more complete when its words are upside down.
01 / Preview
Try it yourself.
Turn the words one at a time. The label stays transformed until it is reset.
- 1
- Start with every word upright.
- 2
- Click or focus the visible control to turn the next word.
- 3
- Continue until every word is upside down.
- 4
- Reset the label when the ceremony has gone far enough.
02 / Usage
Put it somewhere.
import { WordTurnstile } from "gra-ui";
import "gra-ui/styles.css";
export function UpsideDownBrief() {
return <WordTurnstile label="Ready for another review" />;
}03 / API
Small surface area.
labelstringThe whitespace-separated words turned one at a time.