Canvas

Ruler

Measurement chrome that frames a canvas and follows the pointer.

Specimen

Coordinates are measured from the top-left of the browser viewport, not from the document, so the numbers describe where the pointer is on screen.

The rules on this page ARE the specimen — move the pointer and both readouts follow it. They are fixed to the viewport, so they stay put while this page scrolls beneath them.

Every actionable primitive calls useRulerHighlight() internally, so page code never wires this up. It reads bounds from the event target rather than a ref, works on primitives that do not forward one, and reports three steps — hover, press and focus — which the selection frame draws progressively more of.

Highlight on hover. Point at anything actionable — a button, a linked card, a tab, a rail link — and a band shows where it sits on each rule. No dimension is reported, so the rules keep showing their own scale throughout.

Props

Prop	Type	Note
pitch	`number`	Minor tick spacing in px. Defaults to the --ruler-pitch token (8).
minLabelGap	`number`	Smallest gap between labels. Labels thin out to respect it. Default 52.
maxLabels	`number`	Cap per axis, so a large viewport cannot flood the DOM. Default 120.

Every primitive also forwards the native props of the element it renders, so aria-*, id and event handlers work without being listed here.

Use it for

Mounted once, as page chrome, inside <ClientOnly>.
Anywhere the interface should read as a drawing surface rather than a document.
Nothing to wire up: Button, TextLink, a linked Tile and each Tab highlight on their own.

Do not use it for

Mounting more than one. Two overlays would stack and both claim the same origin.
Hard-coding --ruler-thickness to clear the rules. Read --ruler-offset, which is 0 when no ruler is mounted.