Neo-Brutal Crosshair
The forecast readout over a Chart: a 2 px ink vertical line, a 16 px volt dot and an ink tip ("Nov 14 · €31.2k") that snap to the nearest point under a fine pointer and return to rest when the pointer leaves.
Crosshair
The hover readout for a tile, figure or chart: 1 px crosshair lines, a lime cell snapped to the grid under the pointer, crop marks and the live mono "X 471 · Y 302" tag (it flips to the left near the right edge).
Live, interactive React component · light themeResponsive
About the Swiss Tech Mono Crosshair
The hover readout for a tile, figure or chart: 1 px crosshair lines, a lime cell snapped to the grid under the pointer, crop marks and the live mono "X 471 · Y 302" tag (it flips to the left near the right edge). It is the kit's Spotlight with the numbers on: one rAF-throttled pointer listener, fine pointers only, nothing on touch or under reduced motion; every layer is aria-hidden. BentoGrid tiles already have it; use Crosshair around a chart, a Figure or a custom tile, once or twice per page (signature dial 3).
It is part of Swiss Tech Mono. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.
To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.