Component

CompassHinge

It places a child at the center of a dial and lets a directly manipulated knob set its real rotation angle. The content pivots continuously with the knob and can be returned to north with one action.

Possible use

It could let a reviewer turn a warning toward the side of a room where discussion is happening, or let a presenter physically orient an agenda label toward its speaker.

Reasonable alternative

A reasonable local alternative is normal text flow with one alignment or orientation choice. A compass hinge spends geometry on a direction the content could simply name.

01 / Preview

Try it yourself.

Face the issue

Mechanism

1: Drag the compass knob around its dial.
2: Watch the content pivot to the exact angle.
3: Arrow keys also turn the hinge; Face north restores it.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function OrientedNotice() {
  return <CompassHinge><span>Face the issue</span></CompassHinge>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content rotated around the dial's imaginary hinge.