gra-ui

Component

TraceReceipt

Draw on the surface and the exact pointer path remains as SVG geometry around the child. Arrow keys can add a small accessible path, making the trace a real stateful artifact instead of a pointer-only flourish.

Possible use

It could let a reviewer circle the field that caused a handoff discussion, or let a presenter draw an improvised border around the agenda item currently under debate. Neither use turns a gesture into useful evidence.

Reasonable alternative

A reasonable local alternative is a normal focus ring, annotation field or one explicit selected state. Persisting freehand geometry around a child is a poor substitute for recording the reason.

01 / Preview

Try it yourself.

Preview Ready

02 / Usage

Put it somewhere.

example.tsxTSX
import { TraceReceipt } from "gra-ui";
import "gra-ui/styles.css";

export function TracedNotice() {
  return <TraceReceipt><span>Evidence</span></TraceReceipt>;
}

03 / API

Small surface area.

PropTypeDescription
childrenReactNodeThe content surrounded by the user’s recorded pointer trace.