Ruler Edge

Written for the variant you picked above: Blueprint

Build a pill button that gets measured when you point at it. Props: children, sheet (one of two drawing styles), onClick and type. Geometry (pure functions): the pill outline walked by distance with its outward normal, the outline distance nearest a point, and the shortest way round between two distances. Ticks every 4px round the outline, starting 3px outside the edge and pointing outwards — 3.5px long, 6px every 5th, 9px and heavier every 10th. Each tick's delay is its distance round the outline from the entry point × 1.1ms, capped at 420ms, so they spread both ways from where you came in. Ruler numbers sit above the top edge's straight part every 40px of x. On pointerenter, measure the button's real offsetWidth and offsetHeight and the entry point, and render an SVG overlay extending 62px round it with pointer-events none: dashed guide lines running off all four edges; the ticks, each drawn in with stroke-dashoffset (pathLength 1) on its own delay; the numbers fading in; then a width dimension 40px above (clear of the numbers) (extension lines, a run drawn out from the middle to both ends, arrowheads and a filled tag reading e.g. "216 px"), a height dimension 30px to the right (the same, its tag reading the height), and a radius callout — a pin at the corner centre, a line to the arc and a leader out to a note reading "r 28" — each arriving 140ms after the last. Everything uses transitions keyed off a data-shown attribute set on the next frame, so leaving takes it all away together in about 160ms. The button is a 56px pill. Keyboard focus measures from the top centre; blur clears it. Touch measures on press for 2.6s. Reduced motion shows the drawing without the staggered drawing-in. Selected variant — Blueprint (blueprint): A blueprint: blue ground #0f3a6e with a faint 20px grid, a white-outlined translucent button with a #f5f9ff label, pale blue ticks with white major ones, and yellow #ffd36a dimensions with dark blue tag text. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Point at the button and it's measured from where you came in; move away and the drawing clears. Keyboard focus measures it too. Motion: Ticks draw in within about 420ms, spreading both ways from the entry point; the dimensions follow 140ms apart; everything clears in 160ms. Reduced motion shows it at once. Accessibility: A real button with its text label; the drawing is decorative SVG, hidden and pointer-transparent. The numbers are real measurements but aren't announced. Responsive behavior: Leave about 62px of room above and to the right for the dimensions; the numbers follow the button's real size. Touch: A press measures it for a couple of seconds. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Point at the button and it's measured from where you came in; move away and the drawing clears. Keyboard focus measures it too.

Motion

Ticks draw in within about 420ms, spreading both ways from the entry point; the dimensions follow 140ms apart; everything clears in 160ms. Reduced motion shows it at once.

Accessibility

A real button with its text label; the drawing is decorative SVG, hidden and pointer-transparent. The numbers are real measurements but aren't announced.

Responsive

Leave about 62px of room above and to the right for the dimensions; the numbers follow the button's real size.

On touch

A press measures it for a couple of seconds.