gra-ui

Component

SwitchbackRoute

Focus the route and press Up, Right, Down, then Left. Each correct turn lights another station; any wrong arrow returns the route to its entrance, and only the completed detour releases the child.

Possible use

It could make a reviewer navigate a handoff note through a memorized detour, or let a presenter rehearse a four-turn gesture before revealing an agenda item. The order is real, but the detour protects nothing.

Reasonable alternative

A reasonable local alternative is one button or one direct keyboard command. Turning four arrows into a gate makes a trivial reveal depend on a sequence users must remember.

01 / Preview

Try it yourself.

Preview Interactive
Switchback route0/4 turns
  1. ↑Up
  2. →Right
  3. ↓Down
  4. ←Left
Arrived eventually

Focus the route, then follow the arrows in order.

Mechanism
1
Focus the route board.
2
Press Up, Right, Down, then Left in that order.
3
A wrong turn resets the route before the child is released.

02 / Usage

Put it somewhere.

example.tsxTSX
import { SwitchbackRoute } from "gra-ui";
import "gra-ui/styles.css";

export function DetouredNotice() {
  return <SwitchbackRoute><span>Arrived eventually</span></SwitchbackRoute>;
}

03 / API

Small surface area.

PropTypeDescription
childrenReactNodeThe content released after the four-turn keyboard route.