Component

VowelHinge

It turns a sentence into a hinged inventory. Each activation detaches the first vowel from the next word, leaves a visible gap in the original word and renders the vowel as a separate raised chip; restoring the sentence returns every letter.

Possible use

It could be used to make a reviewer physically separate the vocal centers of a handoff note, or to let a presenter hang one vowel from each agenda word while discussing its structure.

Reasonable alternative

A reasonable local alternative is the original sentence with an annotation or comment. Publishing vowel extraction is difficult to defend because a short label does not become clearer when its vowels are put on hinges.

01 / Preview

Try it yourself.

Reviewthebrief

Mechanism

1: Start with an ordinary sentence and intact words.
2: Click Hinge next vowel to detach one first vowel.
3: The vowel leaves a visible gap and becomes a raised hinge chip beside its word.
4: Restore words when the sentence has been disassembled enough.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function HingedBrief() {
  return <VowelHinge label="Review the brief" />;
}

03 / API

Small surface area.

PropTypeDescription

labelstringThe sentence whose first vowels are detached one word at a time.