Component

SpacingWinch

Move the winch along its seven positions. The child keeps the same words but receives actual letter spacing and a roomier paper boundary; Release winch returns the text to its factory tension.

Possible use

It could let a reviewer meter how much typographic distance a handoff warning deserves, or let a presenter tighten an agenda caption until it fills a slide. Neither use needs a physical winch to set a CSS property.

Reasonable alternative

A reasonable local alternative is one deliberate `letter-spacing` value in local CSS or normal responsive wrapping. A range of tensions turns typography into a maintenance ritual.

01 / Preview

Try it yourself.

Current tension

Give this note some room

Wind the letters apart

Mechanism

1: Start with the letters at their factory distance.
2: Drag the seven-position winch or use the arrow keys.
3: The child receives actual letter spacing and a wider paper boundary.
4: Release the winch when typographic tension is no longer defensible.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function TensionedNotice() {
  return <SpacingWinch><span>Give this note some room</span></SpacingWinch>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content whose actual letter spacing is wound apart by the control.