Component

ScrollRedact

It covers its children with five opaque bands as you scroll over them, turning a harmless label into a gradually classified document and preserving the blackout until you scroll back or remove the bands.

Possible use

It could be used to make a reviewer scroll five notches before a status label becomes properly classified, or to ceremonially hide a small piece of content during a live presentation.

Reasonable alternative

A reasonable local alternative is a boolean or small number in the page with one overlay. Publishing a wheel-operated censorship ritual is difficult to defend when CSS can hide content directly.

01 / Preview

Try it yourself.

Release candidate 2.7

Scroll over the label to cover it one band at a time. Scroll back to make it visible again.

Mechanism

1: Place the pointer over the ordinary label.
2: Scroll down; one opaque band covers one fifth of the content.
3: Continue for five bands until the label is fully classified.
4: Scroll up or remove the bands when the ceremony is complete.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function ClassifiedLabel() {
  return <ScrollRedact>Release candidate 2.7</ScrollRedact>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content covered by one redaction band per wheel step.