Component

MosaicDab

New

Each unique pointer stroke claims one grid cell and files the next actual character there. The cells preserve the paint order, spaces become visible dots, and keyboard arrows plus Enter provide the same brush for accessible use.

Possible use

It could let a reviewer paint a handoff title into a board one glyph at a time, or let a presenter turn an agenda caption into a tactile filing exercise. Painting coordinates does not improve the copy.

Reasonable alternative

A reasonable local alternative is rendering the label and using a normal text field or a real drawing surface only when coordinates matter. A brush-powered sentence is paperwork with pixels.

01 / Preview

Try it yourself.

Mechanism

1: Start with every character waiting outside the grid.
2: Drag a brush across empty cells, or use arrows and Enter.
3: Each unique cell files the next real character in paint order.
4: Erase the mosaic when a sentence no longer needs coordinates.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function PaintedNotice() {
  return <MosaicDab label="Park this handoff" />;
}

03 / API

Small surface area.

PropTypeDescription

labelstringThe wording filed one character at a time into the paintable mosaic.