Component

RouteInk

The pen follows direct pointer movement and keyboard nudges, while an SVG trail records each position. The cargo moves to the pen's current coordinates and Erase route returns it to the center without leaving a global listener behind.

Possible use

It could let a reviewer draw the path a handoff note took through a meeting, or let a presenter steer an agenda label toward the person currently speaking. The trail records motion without improving the destination.

Reasonable alternative

A reasonable local alternative is normal flow, one alignment rule or a real map interaction. A persistent ink trail is an elaborate receipt for moving a piece of content a few pixels.

01 / Preview

Try it yourself.

Park this note somewhere unnecessary

Mechanism

1: Drag the route pen across the map.
2: The cargo follows and the SVG keeps every turn.
3: Use arrows or erase the route when the trail is long enough.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function RoutedNotice() {
  return <RouteInk><span>Park this note somewhere unnecessary</span></RouteInk>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe cargo that follows the directly drawn route.