Component

PrecisionLadder

It turns a piece of content into a precision exercise. Each successful click lands inside the current target ring, tightens the next ring and advances a real progress state; a miss resets the ladder to its outer ring.

Possible use

It could be used to make a reviewer center a handoff warning before it is considered presentable, or to let a presenter earn the right to place an agenda label in the exact middle of a slide.

Reasonable alternative

A reasonable local alternative is a centered container with no ceremony. Publishing an accuracy ladder is difficult to defend because a label does not gain authority from being clicked near its own center.

01 / Preview

Try it yourself.

Mechanism

1: Start with four rings and no earned precision.
2: Click nearer the center on each attempt; keyboard activation counts as a perfect hit.
3: Each success tightens the target. A miss sends the ladder back to its outer ring.
4: Reset when centering a label has become a professional obligation.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function CenteredNotice() {
  return <PrecisionLadder><span>Center me</span></PrecisionLadder>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content placed in the target and centered only after four accurate hits.