Component
RotationTithe
It turns horizontal pointer travel into a tiny rotation tax. Move across the receipt until a full track width has been spent, and the label turns 45 degrees; the accumulated angle stays until you return the receipt.
Possible use
It could be used to make a reviewer physically spend attention before rotating a caution label, or to let a presenter ceremonially turn an agenda note after each extra pass across a slide.
Reasonable alternative
A reasonable local alternative is a label with one ordinary class and no pointer accounting. Publishing a rotation tithe is difficult to defend because distance travelled by a cursor is not a meaningful reason to reorient text.
01 / Preview
Try it yourself.
Move the pointer left and right across the receipt. A full track width buys one 45° turn.
- 1
- Start with an ordinary label and an unspent distance bank.
- 2
- Move across the receipt, then reverse direction to keep spending width.
- 3
- Each full width rotates the label by 45 degrees and leaves the angle in place.
- 4
- Use the arrow keys as a keyboard-sized quarter-width, or return the receipt to reset.
02 / Usage
Put it somewhere.
import { RotationTithe } from "gra-ui";
import "gra-ui/styles.css";
export function TaxedReceipt() {
return <RotationTithe label="Approved for another review" />;
}03 / API
Small surface area.
labelstringThe text rotated after each full width of pointer distance is spent.