Component

LensRail

It turns a sentence into a rail with a movable inspection lens. The slider changes the real character position, highlights the focused character and replaces the excerpt below with the seven characters currently under review.

Possible use

It could let a reviewer inspect one narrow slice of a long handoff label without trusting their eyes, or let a presenter park a magnified excerpt over whichever agenda phrase currently feels important.

Reasonable alternative

A reasonable local alternative is ordinary text selection or a static truncation. A draggable lens is difficult to defend when the sentence was already readable.

01 / Preview

Try it yourself.

Ready for another review

Current excerptReady f

Move the lens

Mechanism

1: Start with the lens at the first character.
2: Drag the range or use the arrow keys to move it along the rail.
3: The current character enlarges and the seven-character excerpt changes with it.
4: Return the lens to the start when the inspection becomes needless.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function InspectedStatus() {
  return <LensRail label="Ready for another review" />;
}

03 / API

Small surface area.

PropTypeDescription

labelstringThe text traversed by the movable lens.