Component

TensionArc

Move the range control and the actual children rise or sag along a calculated curve while keeping their content and order intact. It gives geometry an opinion about emotional stability.

Possible use

It could let a reviewer bend a handoff row toward the field under discussion, or let a presenter sag an agenda line to signal that a topic has lost energy. The shape adds mood without adding meaning.

Reasonable alternative

A reasonable local alternative is normal flow with one intentional alignment or spacing rule. A live curve is an expensive answer to a sentence that was already readable.

01 / Preview

Try it yourself.

Title

Status

Owner

Pull the tension

Mechanism

1: Start with a row that refuses to express an opinion.
2: Drag the tension control; the actual children sag along a calculated curve.
3: Release tension to make the row straight again.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function SaggingFields() {
  return (
    <TensionArc>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
    </TensionArc>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe row of content placed along the adjustable curve.