Component

ShutterPass

A pointer-controlled shutter changes the actual clip boundary of the child, so the notice is partially hidden until the aperture is moved. Arrow keys, Home and End provide the same direct manipulation route without a pointer.

Possible use

It could let a reviewer reveal a handoff note only as far as attention permits, or let a presenter choose how much of an agenda label the audience deserves to see. Both uses turn visibility into a hand-operated aperture.

Reasonable alternative

A reasonable local alternative is the content itself or a deliberate disclosure control. A draggable clip boundary is extra geometry for deciding whether a sentence is visible.

01 / Preview

Try it yourself.

Only the approved portion is visible

Mechanism

1: Drag the reading shutter across the rail.
2: The clip boundary reveals a real amount of the notice.
3: Use arrow keys or reset the aperture.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function AperturedNotice() {
  return <ShutterPass><span>Only the approved portion is visible</span></ShutterPass>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content revealed through the movable reading shutter.