gra-ui

Component

SelectionSeal

It asks you to select the exact same excerpt three times. Each matching selection leaves a visible impression that bounces into a row, and the third one locks the excerpt into the sentence as a raised seal.

Possible use

It could be used to make a reviewer certify the most important phrase in a handoff note, or to let a presenter ceremonially isolate the sentence they are about to discuss.

Reasonable alternative

A reasonable local alternative is a text selection plus one boolean or range in the page. Publishing a three-selection seal is difficult to defend because selecting a sentence does not make it more approved.

01 / Preview

Try it yourself.

Preview Interactive
Selection seal0 / 3

Select any excerpt, then select that exact excerpt two more times.

Select the same excerpt three times. The sentence will make the result official.

Mechanism
1
Focus the read-only sentence and select any non-empty excerpt.
2
Select the exact same range again; a visible impression bounces into place.
3
Repeat once more and the selected words leave the textarea for a raised mark.
4
Reset when three identical selections have become enough ceremony.

02 / Usage

Put it somewhere.

example.tsxTSX
import { SelectionSeal } from "gra-ui";
import "gra-ui/styles.css";

export function CeremonialApproval() {
  return <SelectionSeal />;
}

03 / API

Small surface area.

PropTypeDescription
propsRecord<never, never>No props; the sentence and sealing ritual are self-contained.