Component

ClarityDebt

It accumulates four clarity charges against a child. Every charge adds real blur to the rendered content, leaving a fully obscured notice after a progression that should never have existed.

Possible use

It could let a reviewer charge a handoff note every time someone asks for more context, or let a presenter blur an agenda label until the meeting agrees it has been discussed enough.

Reasonable alternative

A reasonable local alternative is leaving the content readable and recording a small status. A blur debt makes the information worse as a ceremony for progress.

01 / Preview

Try it yourself.

Ready for review

Mechanism

1: Charge the readable notice.
2: Watch four real blur levels accumulate.
3: Clear the debt to make it legible again.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function IndebtedNotice() {
  return <ClarityDebt><span>Ready for review</span></ClarityDebt>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content made progressively less clear by each charge.