Component

FocusParade

Focus Intake, then Review, then Release. Each correct focus moves the actual notice to the next lane; focusing the wrong station voids the parade and returns it to intake. The interaction is keyboard-native and does not need timers or global listeners.

Possible use

It could make a reviewer tab through an attachment’s intake, review and release stations, or let a presenter rehearse an agenda line through three focus checkpoints. The order demonstrates ceremony, not readiness.

Reasonable alternative

A reasonable local alternative is a normal focus order with one explicit submit or approval action. Focus should reveal affordances, not act as a hidden workflow engine.

01 / Preview

Try it yourself.

Ready for ceremonial release

Mechanism

1: Focus Intake, Review and Release in that order.
2: Each correct station advances the actual cargo lane.
3: Focus the wrong station to void the parade and start again.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function ParadedNotice() {
  return <FocusParade><span>Ready for ceremonial release</span></FocusParade>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe notice that travels as focus reaches each station.