Component

PatternLatch

It places a child behind a small pattern lock. The required triangle-circle-square-circle sequence advances the real lock state; one wrong symbol clears the attempt and the correct sequence opens the notice.

Possible use

It could make a reviewer unlock a handoff note with a pattern remembered from a meeting, or make a presenter enter a tiny gesture ritual before revealing one agenda line.

Reasonable alternative

A reasonable local alternative is a visible button or an ordinary permission check. A fixed symbol pattern protects nothing while adding a memorable way to fail.

01 / Preview

Try it yourself.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function LockedNotice() {
  return <PatternLatch><span>Already available</span></PatternLatch>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content hidden behind the four-symbol pattern.