Component

CursorProof

It hides a label behind proof dots and makes a local cursor reveal each character it crosses. The revealed characters stay visible, so a trivial sentence has to earn its right to be read.

Possible use

It could be used to make a reviewer scan a status label before a handoff, or to let a presenter reveal an agenda item character by character while discussing it.

Reasonable alternative

A reasonable local alternative is the original text with no interaction, or a small CSS mask with one pointer handler. Publishing a cursor proof is difficult to defend because moving over a label does not make it more true.

01 / Preview

Try it yourself.

Move across every character. The label becomes readable only after its paperwork is complete.

Mechanism

1: Start with an ordinary status label hidden behind proof dots.
2: Move the local cursor across the surface, or use the arrow keys.
3: Every character crossed becomes visible and stays visible.
4: Reset the proof when the label has earned an unnecessary reading.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function VerifiedStatus() {
  return <CursorProof label="Ready for review" />;
}

03 / API

Small surface area.

PropTypeDescription

labelstringThe text revealed one character at a time by the proofing cursor.