Component

BlendChoice

Choose Ink, Light or Inversion. The child is composed with a real CSS blend mode against the stamp and patterned surface, so each ruling changes the pixels rather than only changing its label.

Possible use

It could let a reviewer decide whether a handoff note should darken, glow through or invert beneath a department stamp, or let a presenter pick a compositing mood for an agenda card. The pixels change, but the stamp still proves nothing.

Reasonable alternative

A reasonable local alternative is one deliberate local color and layering rule chosen by the surrounding design. A public vote over blend modes is not a meaningful content decision.

01 / Preview

Try it yourself.

Needs an official-looking layer

Choose a composition

Mechanism

1: Start with a notice beneath an imaginary stamp.
2: Choose Ink, Light or Inversion.
3: The actual CSS blend mode changes how the two layers compose.
4: Withdraw the choice when pixel politics has outlived the notice.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function StampedNotice() {
  return <BlendChoice><span>Needs an official-looking layer</span></BlendChoice>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content composed against the component's imaginary official stamp.